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

    Join Date
    Jun 2008
    Location
    Cal
    Posts
    43
    Rep Power
    12

    Dropdown CSS menu trouble in IE6


    Hey there again!

    I have been at it ALLLLLLLLLLLL day, trying to figure out this blasted css menu to work in IE6!!!

    It works fine in FF but dosnt seem to like IE6 and was wondering if someone could please help me figure out the problem

    The first dropdown block ( <ul class="nav"> ) works fine but the second block ( <ul class="sub"> ) inside the first block ( <ul class="nav"> ) doesn't show properly in IE6!!

    Here is a screen shot of my problem:


    Here is my css:
    PHP Code:
    .navbar :hover ul.nav {
    padding:0margin:0
    left:0top:40px
    width:136px
    z-index:604;
    background-color:#333333; }

    .navbar :hover ul.nav li a {
    display:block
    height:24pxwidth:136px;}

    .
    navbar :hover ul.nav li a:hover {background:#ad8d12;}

    .navbar :hover ul.nav :hover ul.sub{
    padding:0margin:0
    left:104pxtop:-4px
    width:200px
    z-index:606
    background-color:#333333;}

    /* keep the 'next' level invisible by placing it off screen. */
    .navbar ul.nav
    .
    navbar :hover ul.nav ul.sub
    {position:absoluteleft:-9999px;} 

    Here is my HTML code:
    PHP Code:
    <ul class="navbar">
        <
    li><a href="#">Link<!--[if IE 7]><!--></a><!--<![endif]-->
            <!--[if 
    lte IE 6]><table><tr><td><![endif]-->
            <
    ul class="nav">
                <
    li><a href="#">Link2</a></li>
                <
    li><a href="#">Link2</a></li>
                <
    li><a href="#">Link2</a></li>
                <
    li><a href="#">Link2<!--[if IE 7]><!--></a><!--<![endif]-->
                    <!--[if 
    lte IE 6]><table><tr><td><![endif]-->
                    <
    ul class="sub">
                        <
    li><a href="#">Link3</a></li
                        <
    li><a href="#">Link3</a></li>
                        <
    li><a href="#">Link3</a></li>
                    </
    ul>
                    <!--[if 
    lte IE 6]></td></tr></table></a><![endif]-->
                </
    li>
            </
    ul>
            <!--[if 
    lte IE 6]></td></tr></table></a><![endif]-->
        </
    li>
    </
    ul


    Thanks a million for even reading up to here
  2. #2
  3. Devshed Intermediate (1500 - 1999 posts)

    Join Date
    Jun 2001
    Location
    Right now? On my chair.
    Posts
    1,777
    Rep Power
    258
    My jesus take out all those conditional comments in the markup and start from there.

    IE6 doesn't support :hover on anything other than <a>

    There should be no spaces in pseudo classes.

    Code:
    .navbar :hover ul.nav :hover ul.sub{
    I'd suggest validating it but with all those conditional comments...
    Use markup the semantic way. You wouldn't want your dog answering the phone for you, would you?
    HTML Validator || CSS Validator -- HTML / CSS Main forums. JavaScript and PHP...maybe
    Bones: HTML; Skin: CSS; Muscle: JavaScript; Brains: PHP; Memory: MySQL
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2008
    Location
    Cal
    Posts
    43
    Rep Power
    12
    Originally Posted by groundscape
    My jesus take out all those conditional comments in the markup and start from there.

    IE6 doesn't support :hover on anything other than <a>

    There should be no spaces in pseudo classes.

    Code:
    .navbar :hover ul.nav :hover ul.sub{
    I'd suggest validating it but with all those conditional comments...
    Hey there, what do you mean by conditional comments?
    and the spaces between pseudo classes??



    It almost seems like the ul.sub is inside and limited to the width of the ul.nav?



    Thx, im not the best at CSS
  6. #4
  7. Devshed Intermediate (1500 - 1999 posts)

    Join Date
    Jun 2001
    Location
    Right now? On my chair.
    Posts
    1,777
    Rep Power
    258
    Ok it's obvious you didn't write this code then. Find the person who did.

    Conditional comments are these little things

    Code:
     <!--[if lte IE 6]></td></tr></table></a><![endif]-->
    Just a little snippet ^.

    Really you shouldn't need conditional comments in HTML.

    Psuedo classes are these, and these

    I'm telling you the problem lies in :hover not being supported for IE6. There have been thousands of threads like this. Simple searching on here or on even Google for that matter will show hundreds of answered threads.
    Use markup the semantic way. You wouldn't want your dog answering the phone for you, would you?
    HTML Validator || CSS Validator -- HTML / CSS Main forums. JavaScript and PHP...maybe
    Bones: HTML; Skin: CSS; Muscle: JavaScript; Brains: PHP; Memory: MySQL
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2008
    Location
    Cal
    Posts
    43
    Rep Power
    12
    Originally Posted by groundscape
    Ok it's obvious you didn't write this code then. Find the person who did.

    Conditional comments are these little things

    Code:
     <!--[if lte IE 6]></td></tr></table></a><![endif]-->
    Just a little snippet ^.

    Really you shouldn't need conditional comments in HTML.

    Psuedo classes are these, and these

    I'm telling you the problem lies in :hover not being supported for IE6. There have been thousands of threads like this. Simple searching on here or on even Google for that matter will show hundreds of answered threads.
    Ohok thanks yer i got the code from cssplay but with my customized dropdown it dosnt seem to show all of the ul.sub?
    do you think it has to do with my :hover cause i have double checked them and seems fine



    Here is all of my css:

    .navbar {display:block; padding:0; margin:0; border:0; z-index:600; list-style: none; height:40px; width:800px; background:url(http://desktopwallz.com/siteimages/navbar_bg.jpg);}
    .navbar li {float:left; position:relative; z-index:601;}
    .navbar li a{float:left; z-index:602; padding:0; margin:0; border:0; display:block; height:40px; background:url(http://desktopwallz.com/siteimages/navbar.jpg) no-repeat;
    /* BIG picture cut up bellow */}
    .navbar li a b{margin-left:-9999px;}

    /* Moving the image around inside the <a> on hover for each top link */
    .navbar li#nav-home a{width:214px; background-position:0 0;}
    .navbar li#nav-home a:focus{-moz-outline-style: none;}
    .navbar li#nav-home a:hover,
    .navbar li#nav-home:hover a{background-position:0 -40px;}

    .navbar li#nav-categories a{width:136px; background-position:-214px 0;}
    .navbar li#nav-categories a:focus{-moz-outline-style: none;}
    .navbar li#nav-categories a:hover,
    .navbar li#nav-categories:hover a{background-position:-214px -40px;}

    .navbar li#nav-top a{width:104px; background-position:-350px 0;}
    .navbar li#nav-top a:focus{-moz-outline-style: none;}
    .navbar li#nav-top a:hover,
    .navbar li#nav-top:hover a{background-position:-350px -40px;}

    .navbar li#nav-contact a{width:109px; background-position:-454px 0;}
    .navbar li#nav-contact a:focus{-moz-outline-style: none;}
    .navbar li#nav-contact a:hover,
    .navbar li#nav-contact:hover a{background-position:-454px -40px;}


    /* keep the 'next' level invisible by placing it off screen. */
    .navbar ul,
    .navbar :hover ul ul,
    .navbar :hover ul :hover ul ul,
    .navbar :hover ul :hover ul :hover ul ul,
    .navbar :hover ul :hover ul :hover ul :hover ul ul{position:absolute; left:-9999px;}

    /* custimizing the links and ul.nav */
    .navbar :hover ul.nav{padding:0; margin:0; list-style:none; left:0; top:40px; width:136px; z-index:604; list-style:none; line-height:24px; background-color:#333333; opacity:.92; filter:alpha(opacity=92.0); -moz-opacity:0.92; text-align:left;}
    .navbar :hover ul.nav li a{display:block; height:24px; line-height:24px; color:#ffffff; width:136px; text-align:left; font-weight:bold; background:#333333;}
    .navbar :hover ul.nav li a:hover{background:#ad8d12;}

    /* Customizing all the ul.sub and below level blocks */
    .navbar :hover ul :hover ul,
    .navbar :hover ul :hover ul :hover ul,
    .navbar :hover ul :hover ul :hover ul :hover ul,
    .navbar :hover ul :hover ul :hover ul :hover ul :hover ul
    {padding:0; margin:0; list-style:none; left:104px; top:0px;; line-height:24px; background-color:#333333; opacity:.92; filter:alpha(opacity=92.0); -moz-opacity:0.92; text-align:left; width:104px; z-index:999; }



    And my real HTML:
    PHP Code:
    <ul class="navbar">
        <
    li id="nav-home"><a href="#">Home</a></li>
        <
    li id="nav-categories"><a href="#">Categorys<!--[if IE 7]><!--></a><!--<![endif]-->
            <!--[if 
    lte IE 6]><table><tr><td><![endif]-->
            <
    ul class="nav">
                <
    li><a href="#">ul.Nav link</a></li>
                <
    li><a href="#">ul.Nav link</a></li>
                <
    li><a href="#">ul.Nav link<!--[if IE 7]><!--></a><!--<![endif]-->
                    <!--[if 
    lte IE 6]><table><tr><td><![endif]-->
                    <
    ul class="sub">
                        <
    li><a href="#">ul.sub link</a></li>
                        <
    li><a href="#">ul.sub link</a></li>
                        <
    li><a href="#">ul.sub link</a></li>
                    </
    ul>
                    <!--[if 
    lte IE 6]></td></tr></table></a><![endif]-->
                </
    li>
            </
    ul>
            <!--[if 
    lte IE 6]></td></tr></table></a><![endif]-->
        </
    li>
        <
    li id="nav-top"><a href="#">Browse</a></li>
        <
    li id="nav-contact"><a href="#">Contact</a></li>
    </
    ul
  10. #6
  11. Devshed Intermediate (1500 - 1999 posts)

    Join Date
    Jun 2001
    Location
    Right now? On my chair.
    Posts
    1,777
    Rep Power
    258
    .navbar li#nav-admi:hover a

    That a typo?

    You still have spaces.

    .navbar :hover ul :hover ul :hover ul :hover ul,

    At the end...
    Use markup the semantic way. You wouldn't want your dog answering the phone for you, would you?
    HTML Validator || CSS Validator -- HTML / CSS Main forums. JavaScript and PHP...maybe
    Bones: HTML; Skin: CSS; Muscle: JavaScript; Brains: PHP; Memory: MySQL
  12. #7
  13. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2008
    Location
    Cal
    Posts
    43
    Rep Power
    12
    Originally Posted by groundscape
    .navbar li#nav-admi:hover a

    That a typo?

    You still have spaces.

    .navbar :hover ul :hover ul :hover ul :hover ul,

    At the end...
    Oh yes it was and i took that chunk out as its unesocery code
    And when u mean by spaces should this here:

    PHP Code:
    .navbar :hover ul :hover ul :hover ul :hover ul
    Look Like this or something:

    PHP Code:
    .navbar :hover ul:hover ul:hover ul:hover ul
    Thanks heaps
  14. #8
  15. Devshed Intermediate (1500 - 1999 posts)

    Join Date
    Jun 2001
    Location
    Right now? On my chair.
    Posts
    1,777
    Rep Power
    258
    That code could probably be shortened. You just need the last child you wish to specify with :hover because to make that last child hover, all the other parents must be hovered. So you can probably just do ul:hover ul,...
    Use markup the semantic way. You wouldn't want your dog answering the phone for you, would you?
    HTML Validator || CSS Validator -- HTML / CSS Main forums. JavaScript and PHP...maybe
    Bones: HTML; Skin: CSS; Muscle: JavaScript; Brains: PHP; Memory: MySQL
  16. #9
  17. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2008
    Location
    Cal
    Posts
    43
    Rep Power
    12
    Originally Posted by groundscape
    That code could probably be shortened. You just need the last child you wish to specify with :hover because to make that last child hover, all the other parents must be hovered. So you can probably just do ul:hover ul,...
    Yer is it nessersery though? because this dropdown menu, which my code is based off has it like that:
    .navbar :hover ul :hover ul...ect

    http://www.cssplay.co.uk/menus/pro_drop.html

    Even though my code is pretty much the same the ul.sub block still dosnt show properly???


    Thier CSS:
    .menu, .menu ul {list-style-type:none; padding:0; margin:0; font-family:arial, sans-serif;}

    /* Set up the size of the list items and float left to place inline */
    .menu li.top {display:block; float:left; position:relative;}

    /* Style and position the table so it takes no part in the menu function. The font size is necessary for IE5.5 */
    .menu table {border-collapse:collapse; width:0; height:0; position:absolute; top:0; left:0;}

    /* Default link styling */
    .menu li.top a.top_link {display:block; float:left; height:35px;}
    .menu li.top a span {position:absolute; left:-9999px; top:0; z-index:0; font-size:10px;}

    /* pre-load the hover images */
    .menu li.p1 {width:65px; background:url(multi_level-files/home_1.gif) no-repeat;;}
    .menu li.p2 {width:90px; background:url(multi_level-files/products_1.gif) no-repeat;;}
    .menu li.p3 {width:88px; background:url(multi_level-files/services_1.gif) no-repeat;;}
    .menu li.p4 {width:91px; background:url(multi_level-files/contacts_1.gif) no-repeat;;}
    .menu li.p5 {width:72px; background:url(multi_level-files/shop_1.gif) no-repeat;;}
    .menu li.p6 {width:103px; background:url(multi_level-files/privacy_1.gif) no-repeat;;}


    .menu li a#home {width:65px; background:url(multi_level-files/home_0.gif) no-repeat;}
    .menu li a#products {width:90px; background:url(multi_level-files/products_0.gif) no-repeat;}
    .menu li a#services {width:88px; background:url(multi_level-files/services_0.gif) no-repeat;}
    .menu li a#contacts {width:91px; background:url(multi_level-files/contacts_0.gif) no-repeat;}
    .menu li a#shop {width:72px; background:url(multi_level-files/shop_0.gif) no-repeat;}
    .menu li a#privacy {width:103px; background:url(multi_level-files/privacy_0.gif) no-repeat;}

    /* Style the list OR link hover. Depends on which browser is used */

    .menu a:hover {visibility:visible;}
    .menu li:hover {position:relative; z-index:200;}

    .menu li a#home:hover, .menu li:hover a#home,
    .menu li a#products:hover, .menu li:hover a#products,
    .menu li a#services:hover, .menu li:hover a#services,
    .menu li a#contacts:hover, .menu li:hover a#contacts,
    .menu li a#shop:hover, .menu li:hover a#shop,
    .menu li a#privacy:hover, .menu li:hover a#privacy {background:transparent;}

    /* keep the 'next' level invisible by placing it off screen. */
    .menu ul,
    .menu :hover ul ul,
    .menu :hover ul :hover ul ul,
    .menu :hover ul :hover ul :hover ul ul,
    .menu :hover ul :hover ul :hover ul :hover ul ul {position:absolute; left:-9999px; top:-9999px; width:0; height:0;}

    .menu :hover ul.sub {left:0; top:35px; background: #fff; padding:3px 0; border:1px solid #888; white-space:nowrap; width:93px; height:auto;}
    .menu :hover ul.sub li {display:block; height:20px; position:relative; float:left; width:90px;}
    .menu :hover ul.sub li a {display:block; font-size:11px; height:20px; width:87px; line-height:20px; text-indent:5px; color:#000; text-decoration:none; border:3px solid #fff; border-width:0 0 0 3px;}
    .menu :hover ul.sub li a.fly {background:#fff url(multi_level-files/arrow.gif) 80px 7px no-repeat;}
    .menu :hover ul.sub li a:hover {background:#37a237; color:#fff;}
    .menu :hover ul.sub li a.fly:hover {background:#37a237 url(multi_level-files/arrow_over.gif) 80px 7px no-repeat; color:#fff;}
    .menu :hover ul li:hover > a.fly {background:#37a237 url(multi_level-files/arrow_over.gif) 80px 7px no-repeat; color:#fff;}

    .menu :hover ul :hover ul,
    .menu :hover ul :hover ul :hover ul,
    .menu :hover ul :hover ul :hover ul :hover ul,
    .menu :hover ul :hover ul :hover ul :hover ul :hover ul
    {left:90px; top:-4px; background: #fff; padding:3px 0; border:1px solid #888; white-space:nowrap; width:93px; z-index:200; height:auto;}
  18. #10
  19. Devshed Intermediate (1500 - 1999 posts)

    Join Date
    Jun 2001
    Location
    Right now? On my chair.
    Posts
    1,777
    Rep Power
    258
    Well change your CSS to theirs. Which changes did you even make to it? Check the site in IE6 (cssplay) and see if their dropdown menu even works in IE6.
    Use markup the semantic way. You wouldn't want your dog answering the phone for you, would you?
    HTML Validator || CSS Validator -- HTML / CSS Main forums. JavaScript and PHP...maybe
    Bones: HTML; Skin: CSS; Muscle: JavaScript; Brains: PHP; Memory: MySQL
  20. #11
  21. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2008
    Location
    Cal
    Posts
    43
    Rep Power
    12
    I found the problem!!!

    I checked their code side by side against mine and found that if i take the "filter:alpha(opacity=92.0);" out in...

    PHP Code:
    .navbar :hover ul {
    padding:0margin:0
    left:0top:40px
    width:136px
    z-index:700
    background-color:#333333; 
    opacity:.92filter:alpha(opacity=92.0); -moz-opacity:0.92text-align:left;} 
    ...it works perfectly fine in IE6?

    Why does the filter:alpha(opacity=92.0);" effect my second flyout in IE6 so badly?

    Thanks heaps for all your help!
  22. #12
  23. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2008
    Posts
    3
    Rep Power
    0

    son of suckerfish works in ie6


    Hi
    i have used that cssplay dropdown myself before and got it to work in IE6, so it can be done.

    but offhand you might want to try the Son of Suckerfish technique at htmldog.com


    This involves a call to a tiny bit of javascript which will make your flyouts work in IE6. It's fairly straightforward to implement. Not pure CSS then but will validate.
  24. #13
  25. Devshed Intermediate (1500 - 1999 posts)

    Join Date
    Jun 2001
    Location
    Right now? On my chair.
    Posts
    1,777
    Rep Power
    258
    Because that really shouldn't even be there. The alpha opacity filter.

    Nifty little article to read.
    Use markup the semantic way. You wouldn't want your dog answering the phone for you, would you?
    HTML Validator || CSS Validator -- HTML / CSS Main forums. JavaScript and PHP...maybe
    Bones: HTML; Skin: CSS; Muscle: JavaScript; Brains: PHP; Memory: MySQL

IMN logo majestic logo threadwatch logo seochat tools logo