#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2007
    Posts
    6
    Rep Power
    0

    Son of Suckerfish Menu in IE6


    So I tried this popular drop-down menu technique and is all good except that the second-level menu links line up beside the top-level headers in IE6 instead of, well, dropping down (which thankfully does happen in FF). This would be very confusing for visitors trying to navigate!

    I have seen this problem described on forums and blogs but not found a solution. The example page at HTML Dog displays properly in IE6, which offers no insights . . .

    See the page in question: hire.karenjeane.com/web/site2.php

    Thanks for any help!
  2. #2
  3. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4309
    Check out this article on making a centered Suckerfish menu. The example works in IE6.

    There are several changes shown in it. The part of it includes giving the top-level <li>s position:relative and using left:0 in the hover state instead of left:auto. More information.
    Spreading knowledge, one newbie at a time.

    Learn CSS. | PHP includes | HTML Validator | CSS validator

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2007
    Posts
    6
    Rep Power
    0
    Awesome - I'll try this one out instead, and also read about positioning.
  6. #4
  7. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2007
    Posts
    6
    Rep Power
    0
    I implemented Tyssen Design's technique, except the menu items now fail to appear at all on my page in IE6. Also, while the text is centered, the dropdown blocks have a left indent. Is there a way to correct both of these things? Thanks again.

    hire.karenjeane.com/web/site2.php
    hire.karenjeane.com/web/style2.php
  8. #5
  9. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4309
    Many elements have default padding and/or margins. Set the margins and padding on the <ul>s explicitly.

    I recommend that you read No Margin For Error and Starting with CSS: revisited.
    Spreading knowledge, one newbie at a time.

    Learn CSS. | PHP includes | HTML Validator | CSS validator

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  10. #6
  11. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2007
    Posts
    6
    Rep Power
    0
    Got all the spacing under control. As for IE, forgot to upload the Javascript file referenced. Yikes. Well, it's good to go. Grateful for the help once again.

IMN logo majestic logo threadwatch logo seochat tools logo