SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Zealot iStudent's Avatar
    Join Date
    Mar 2004
    Location
    So Cal
    Posts
    126
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    suckerfish menu is not behaving correctly in IE6...figures

    Only in IE6 when you hover over the Information link, the background and font color for the drop-down menu is same as the main menu. This is not how the menu is supposed to behave. I am lost on how to fix this just for IE6, yet still work for modern browsers.

    My suckerfish menu is located here

  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,
    The problem is that you did not have the .sfhover classes set up in your css for those selectors.

    Code:
    #primary-nav li li:hover {
        background: #BDB89C; /* Provides the background for the rollover drop-down menu */
        }
    #primary-nav li ul li:hover a, #primary-nav li ul li li:hover a, #primary-nav li ul li li li:hover a, #primary-nav li ul li li li:hover a {
        color: #000000; /* Provides the the rollover text for the drop-down menu */
        }
    You also have a lot of redundant rules in your css that can be trimmed down. It looks like you copied and pasted the code directly from htmldog.com, that code has several known issues. It is always best to hide the sub ul with large negative margins rather than positioning values. IE can choke on left:auto; sometimes when revealing the sub ul.

    Your code was also set up for sub uls' nested four levels deep. It is very doubtful that you will need to go that deep. I reduced it to two sub uls' which will trim down the css dramatically. I have also taken care of a couple of other IE bugs as well and I renamed your main UL ID to #nav (keeps it simple for writing out the selector names)

    Here is the complete code with fixes in place working in all versions of IE and all other browsers.

    Hope that helps

    Code HTML4Strict:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled</title>
     
    <!--[if lte IE 6]>
    <script type="text/javascript" src="js/ie_menu.js"></script>
    <![endif]-->
     
    <style type="text/css">
     
    #nav {
        float:left;
        width:960px;
        background:#F6F4CF url(images/nav_brown.jpg) repeat-x; /* non-active background image for the main menu */
        font:normal 16px/40px Arial, Helvetica, Verdana, sans-serif;
    }
     
    #nav, #nav ul { 
        margin:0;
        padding:0;
        list-style:none;
    }
     
    #nav li {
        float:left;
        position:relative;/*stacking context for sub ul*/
    }
     
    #nav li a { /* non-rollover link formatting for the main menu links */
        float:left;/*IE haslayout*/
        color: #000;
        text-decoration: none;
        padding:0 10px; /* spacing between the links on the main-menu */
        border-right:1px solid #CCC; /* line structure separating links on the main-menu */ 
    }
     
    #nav li:hover,
    #nav li.sfhover {
        background: url(images/nav_brown1.jpg) repeat-x; /* rollover image for the main menu */
    }
    #nav li:hover a,
    #nav li.sfhover a {
        color: #999; /* rollover text for the main menu */
    }
     
    /*==== Sub List ====*/
    #nav ul {
        position:absolute; z-index:2; top:100%; left:0;
        width:270px;
        margin-left:-999em; /*hide the sub ul with neg margin, not positioning*/
        line-height:normal;
        border-bottom: 1px solid #CCC; /*bottom border for the drop-down menu */
        background-color:#736252; /* background for the drop-down menu, non-hover */
    }
     
    #nav li li {
        width:270px; /* length of the link for the drop-down menu */
    }
     
    #nav li li a { /*sub ul anchor styles */
        float:none;/*float on "#nav li a" sets haslayout, now remove the float and reset as block*/
        display:block;
        padding: 8px 10px; /* top padding for the sub li anchors */
        color: #DDD;
        border: 1px solid #CCC;
        border-bottom: none;
    }
     
    #nav li li:hover,
    #nav li li.sfhover {
        background: #BDB89C; /* background for the rollover drop-down menu */
    }
     
    #nav li ul li:hover a,
    #nav li ul li li:hover a,
    #nav li ul li.sfhover a,
    #nav li ul li li.sfhover a {
        color: #000; /* rollover text for the drop-down menu */
    }
     
    #nav li:hover li a,
    #nav li li:hover li a,
    #nav li.sfhover li a,
    #nav li li.sfhover li a {
        color: #FFF; /* text color for the drop-down menu, non-hover */
    }
     
    #nav li:hover ul,
    #nav li.sfhover ul {
        margin-left:0;/*reveal the 1st level sub ul on li:hover*/
        visibility:visible; /*fix IE7 sticking dropdown (make it think something changes on hover)*/
    }
     
    #nav li:hover ul ul,
    #nav li.sfhover ul ul {
        margin-left: -999em; /*keep the 2nd level sub ul hidden on 1st level li:hover*/
    }
    #nav li li:hover ul,
    #nav li li li:hover ul,
    #nav li li.sfhover ul,
    #nav li li li.sfhover ul {
        margin-left:268px;/*reveal the 2nd level sub ul on li:hover*/
        top:0;
    }
     
    </style>
     
    </head>
    <body>
     
    <ul id="nav" class="sf-menu">                
        <li><a href="#">Home</a></li>
        <li><a href="#">Information &raquo;</a>
            <ul>
                <li><a href="#">Calendar</a></li>
                <li><a href="#">History</a></li>
                <li><a href="#">Our Mission &raquo;</a>
                    <ul>
                        <li><a href="#">sub-sub-1</a></li>
                        <li><a href="#">sub-sub-2</a></li>
                        <li><a href="#">sub-sub-3</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><a href="#">FAQ</a></li>
        <li><a href="#">Contact &raquo;</a>
            <ul>
                <li><a href="#">sub-1</a></li>
                <li><a href="#">sub-2</a></li>
                <li><a href="#">sub-3</a></li>
            </ul>    
        </li>
    </ul>
     
    </body>
    </html>

  3. #3
    SitePoint Zealot iStudent's Avatar
    Join Date
    Mar 2004
    Location
    So Cal
    Posts
    126
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Rayzur! You are correct I used a generator site (PixoPoint to be exact). This was my very first suckerfish style menu. Thanks again for everything!


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
  •