SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Addict
    Join Date
    Dec 2003
    Location
    Raleigh, NC
    Posts
    278
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Suckerfish CSS dropdown problem in IE 7

    Hello,

    I am working on trying to fix the dropdown menu for someone in IE 7 on http://www.joegriffith.com/online-resources.html

    I did not do the code but there are 3 dropdowns on those 3 buttons right above the light grey content area.....the problem is that when you rollover the other buttons the old one does nto go away. I know there are validation errors in the code but I have isolated just the menu part to a test page so I know that is not throwing off...here's the test page
    http://www.joegriffith.com/test.html

    Also I noticed the menus do not align with the left of the button in IE 7, its correct in Firefox and IE 6 and below.

    Anyone know the problem?

    thanks!

    Kevin

  2. #2
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    In Standards mode, IE7 supports :hover on more elements than just <a>, so it doesn't need the JS code like IE5-6 does.

    I would remove the table and use just one top-level list before I worried about it. Next I would remove all of those redundant shhover scripts and use whatever:hover instead.

    I hope you're not the one using FrontPage.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    If you want the suckerfish menus to work on more than one nav then you can't just keep copying the same routine over and over again with a different id. Only one js routine can be called onload anyway.

    You would need to wrap it up something like this:

    Code:
    <script type="text/javascript"><!--//--><![CDATA[//><!--
    multiList = function (){
        sfHover('nav1'); // list your list id's here
        sfHover('nav2'); 
    }
    
    sfHover = function(ulid) {
        var sfEls = document.getElementById(ulid).getElementsByTagName("LI");
        for (var i=0; i<sfEls.length; i++) {
            sfEls[i].onmouseover=function() {
                this.className+=" over";
            }
            sfEls[i].onmouseout=function() {
                this.className=this.className.replace(new RegExp(" over\\b"), "");
            }
        }
    }
    if (window.attachEvent) window.attachEvent("onload", multiList);
    
    
    
    //--><!]]></script>

    http://www.pmob.co.uk/temp/drop-down-2lists.htm

  4. #4
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Only one js routine can be called onload anyway.
    Since when? The advanced event models (DOM2 events and IE events) allow multiple event handlers to be attached to any event.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  5. #5
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think he means you can only use window.attachEvent as in that script once otherwise you need an event handler function as well.

  6. #6
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm not following you, Tyssen.

    Try this in IE5+/Win or Opera 7+ which both support attachEvent().
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html><head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta http-equiv="Content-Style-Type" content="text/css">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    <title></title>
    <script type="text/javascript">
    if(window.attachEvent) {
      window.attachEvent('onload',function(){alert('hello')})
      window.attachEvent('onload',function(){alert('world')})
    }
    </script>
    </head>
    <body>
    
    </body>
    </html>
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi Kravvitz,

    As you may have guessed javascript is mainly a mystery to me and I was confusing it with window.onload I meant to refer to something like this:

    http://simonwillison.net/2004/May/26/addLoadEvent/

  8. #8
    SitePoint Member
    Join Date
    Feb 2007
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    same problem....suckerfish dropdowns are working great in all browsers, except the sub-menus don't line up correctly in IE7 - just can figure it out

    Faliol: I noticed that in IE 7 on your test page (http://www.joegriffith.com/test.html) the drop downs are aligned properly, yet on the home page (http://www.joegriffith.com/)....nope, but I can't figure out the difference // nice site, by the way //

    anyone have any ideas?
    my problems are at:
    http://www.svsbedford.org/svsweb

    thanks
    --bp

  9. #9
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    brandonjp, they look fine in IE7 to me.

    Are you aware that the XML declaration forces IE6 into quirks mode?
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  10. #10
    SitePoint Member
    Join Date
    Feb 2007
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Kravvitz:
    Thanks for the reply...yeah - I got it fixed about 30 minutes ago. For future reference - in case anyone else has the same problem... Since IE now understands the child element as of version 7, it was getting confused by dual commands, so I simply had to change the left from 'auto' to '0' - looks like this finally...
    li > ul {
    top: 1.65em;
    left: 0;
    }

    as for the XML stuff...now I didn't realized that, but I've not noticed any problems (yet!) -- maybe I should look into that!??

    Thanks for your willingness to help!! - i love internet people!
    --bp

  11. #11
    SitePoint Addict
    Join Date
    Feb 2007
    Posts
    270
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Suckerfish doesn't need the js in IE7.

    The best solution is to use conditional comments to only load the js file when the IE version is 6 or less:

    <!--[if lte IE 6]>
    <script src="/suckerfish.js" type="text/javascript" language="javascript" charset="utf-8"></script>
    <![endif]-->

    That way you only get the javascript when you need it.

  12. #12
    SitePoint Zealot
    Join Date
    Jul 2002
    Location
    Los Angeles CA
    Posts
    136
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Speaking of suckerfish...there's a nice little jquery plugin for that:

    Code:
    $(document).ready(function(){
        $("#nav-one li").hover(
            function(){ $("ul", this).fadeIn("fast"); }, 
            function() { } 
        );
        if (document.all) {
            $("#nav-one li").hoverClass ("sfHover");
        }
    });
    
    $.fn.hoverClass = function(c) {
        return this.each(function(){
            $(this).hover( 
                function() { $(this).addClass(c);  },
                function() { $(this).removeClass(c); }
            );
        });
    };

  13. #13
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Arlen
    Suckerfish doesn't need the js in IE7.

    The best solution is to use conditional comments to only load the js file when the IE version is 6 or less:
    Yes good point - (but also remember that IE7 must be in standards mode for this to work because it doesn't understand hover on elements other than anchors in quirks mode )


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •