SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2007
    Posts
    98
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Suckerfish Menu Dropdowns get stuck in IE7

    I have just about finished working on my navigation menu and it seems to work ok for the most part, but I just noticed an issue in IE7 (possibly other IE versions / other browsers, I haven't been able to check yet).

    If you click anywhere on the page (doesn't matter where) and then try to use the navigation menu, whenever you open one submenu, it stays there and does not go away when you are no longer hovering over it. It should go away.

    This doesn't appear to be in issue in at least Firefox 3. But I have noticed it and been able to reproduce it easily in IE7.

    Any ideas what might be causing this? It uses the son of suckerfish dropdown menus.

    http://www.russellholloway.com/beta4/test.html
    http://www.russellholloway.com/beta4/main.css

  2. #2
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Hi,
    I remember helping you with this recently. I think I may have given you some wrong styles in the previous fix.

    I just tested it in IE7 and it works fine if you will replace left:0 with left:auto on the
    Code:
    #nav li:hover ul, #nav li.sfhover ul {
        left: auto;
    }
    
    #nav li:hover a, #nav li.sfhover a {
        left: auto;
    }
    That's how it was originally but I had you put left:0 there mistakenly.
    It will work in IE6 with that also, by the way it looks like you got another double margin bug going on in IE6 again. The right side of the page has twice the margin as other browsers do. I'll look into that and see what's going on.

  3. #3
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Test this to make IE7 release the hover state on the li:
    Code:
    #nav li:hover {
        visibility: visible;  /* makes IE7 think something changes on hover */
    }
    Happy ADD/ADHD with Asperger's

  4. #4
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    by the way it looks like you got another double margin bug going on in IE6 again
    No, it's not the double margin bug. The footer padding along with width:100% is stretching the wrapper in IE6. Remove the width from your footer, it is 100% by default anyway when no width is declared. When you declare the width as 100% and give left and right paddings IE6 will stretch the wrapper to accommodate it.


    .footer {
    /*width: 100%; --- Remove This */
    padding: 20px;
    }

  5. #5
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by erik.j View Post
    Test this to make IE7 release the hover state on the li:
    Code:
    #nav li:hover {
        visibility: visible;  /* makes IE7 think something changes on hover */
    }
    That works also erik.

    So which do you recommend (or use) on the #nav li:hover ul & #nav li:hover a

    left:0
    or
    left:auto

  6. #6
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    With left:auto the browser has to guess the required position, and I have seen IE get it wrong on a number of occasions - any time I have an absolutely positioned element I always make sure it has both x and y coordinate positions set to leave nothing to chance.

  7. #7
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    I wish HTMLdog would add that IE trigger in their code. Don't they know a lot of people use the Suckerfish without the Javascript? (leaving the Javascript in the <head> seems to for some reason work as a trigger for IE7 simply by being there (I've changed the sfhover classname so that the JS cannot do anything, and it still triggers IE7 fine even though it's clearly not using it) while copying their code to the letter and then simply deleting the JS will make it either not hover at all, or, with other JS, give you "ghosts" and other hovering problems).

    I ended up using position: relative on that ul li:hover in my suckerfishes, which is fine so long as you don't have it already on the regular li's (trigger needs to be "new" to the browser, lawlz).

    I use left: 0 except when there is no set width on the menu items (yes, you CAN do this with Opera if you set the width to "auto")-- then I might need "left: auto" to make the browser calculate where to set this submenu or whatever.

    I've also seen times where IE7 didn't like "left" at all, but wanted margin-left instead. But this screwed with some other browser so I don't use it.

  8. #8
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I usually direct people to that HTMLdog article, as their javascript seems to work better than others, however the html and css they use does need some tweaking. IE7 will still use the javascript if it is allowed to, but it doesn't need to - I usually call the javascript from a conditional comment for IE6. This does mean that some sort of hover change does need to be used for IE7, and also quite often a dropdown <ul> background needs to be specified to prevent IE dropout.

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,549
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Centauri
    With left:auto the browser has to guess the required position, and I have seen IE get it wrong on a number of occasions -
    IE gets left:auto incorrect when the parent element has a text-alignment other than left. If the parent had position:relative and is also text-align:center or text-align right then the auto position is reflected by the text alignment and completely different to other browsers.

    Quote Originally Posted by stomme poes
    I've also seen times where IE7 didn't like "left"
    IE7 doesn't always bring the element back into view when you use left:0 and I prefer to use margin-left:-999em and margin:0 instead which will work everywhere if done correctly. You are correct in that IE7 works when it sees the suckerfish JS and this is probably due to the extra rules it sees. However the js should be hidden from IE7 as it shouldn't need to be bothered with it.

    As already mentioned by erik IE7 has the same bug as IE6 and it needs something to change on the hovered element before it will action a change on the child of the hovered element. visibility:visible is the perfect candidate for this as it affects nothing.

    The CSS at htmldog does need tweaking and the main points are not to use the child selector, not to use left:auto, and then remember set position:relative on the parent list and not just the main ul.

  10. #10
    SitePoint Enthusiast
    Join Date
    Mar 2007
    Posts
    98
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the tips and fixes. I added visibility: visible and that fixed it right away.

    Thanks for also pointing out that the footer was causing issues in IE6, now I know to look out for that issue in IE6 in the future.

    I've enjoyed the discussion so far here and it does seem like that article needs a little work (although for a newbie to CSS like me it was pretty easy to understand and follow - combined with a button background example I saw in another post by Paul O'B).

    I originally had used left: auto since that article mentioned some issue regarding with Opera and left: 0 (and I assumed the updated article using left: auto was an improvement over the older article using left: 0) but it looks like using left: 0 seems to be the option of choice when possible.

  11. #11
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Older Opera may have had a problem with that, too. And possibly Opera 9.5 is ok with it now? Not sure.


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
  •