ansaurus

Question

Why does this menu render poorly in Firefox 3.5 and IE7? How do I adapt?

Answer 1

A:

change class ul#menu > li > a, ul#menu > li > ul a to -

ul#menu > li > a, ul#menu > li > ul a 
{
display:inline-block;
text-decoration:none;
white-space:nowrap;
width:95%;
}

and move <span>>></span> out of the anchor tag. this works on firefox could not try it on IE

Update

<style type="text/css">
.menucontrol a:link, .menucontrol a:active, .menucontrol a:visited
{
    border: 1px solid orange;
    color: white;
    background-color: orange;
}
.menucontrol a:hover
{
    background-color: #fff;
    color: #333;
}
.menucontrol, .menucontrol ul
{
    margin: 0;
    padding: 0;
    list-style-type: none;
    list-style-position: outside;
    position: relative;
    line-height: 1.5em;
}
.menucontrol a:link, .menucontrol a:active, .menucontrol a:visited
{
    display: block;
    padding: 0px 5px;
    text-decoration: none;
}
.menucontrol li
{
    float: left;
    position: relative;
}
.menucontrol ul
{
    position: absolute;
    width: 12em;
    top: 1.5em;
    display: none;
}
.menucontrol li ul a
{
    width: 12em;
    float: left;
}
.menucontrol ul ul
{
    top: auto;
}
.menucontrol li ul ul
{
    left: 12em;
    margin: 0px 0 0 10px;
}
.menucontrol li:hover ul ul, .menucontrol li:hover ul ul ul, .menucontrol li:hover ul ul ul ul
{
    display: none;
}
.menucontrol li:hover ul, .menucontrol li li:hover ul, .menucontrol li li li:hover ul, .menucontrol li li li li:hover ul
{
    display: block;
}
</style>

<body style="font-family: Consolas; font-size: 11px;">
<ul class="menucontrol">
<li><a href="#">1 HTML</a></li>
<li><a href="#">2 CSS</a></li>
<li><a href="#">3 Javascript</a>
    <ul>
        <li><a href="#">3.1 jQuery</a>
            <ul>
                <li><a href="#">3.1.1 Download</a><ul>
                    <li><a href="#">3.1.1 Download</a><ul>
                        <li><a href="#">3.1.1 Download</a></li>
                        <li><a href="#">3.1.2 Tutorial</a></li>
                    </ul>
                    </li>
                    <li><a href="#">3.1.2 Tutorial</a></li>
                </ul>
                </li>
                <li><a href="#">3.1.2 Tutorial</a></li>
            </ul>
        </li>
        <li><a href="#">3.2 Mootools</a></li>
        <li><a href="#">3.3 Prototype</a></li>
    </ul>
</li>

<script type="text/javascript">
function mainmenu()
{
$(" .menucontrol ul ").css({ display: "none" }); // Opera Fix
$(" .menucontrol li").hover(function()
{
    $(this).find('ul:first').css({ visibility: "visible", display: "none" }).show(400);
}, function()
{
    $(this).find('ul:first').css({ visibility: "hidden" });
});
}

$(document).ready(function()
{
    mainmenu();
 });

Vinay B R 2010-08-18 18:49:32

Alas, it doesn't solve the IE7 issue. I will check Firefox 3.5 later. If you don't have IE7 and you're a Windows user, you can view the site through the eyes of IE7 here without actually having to install IE7: http://www.spoon.net/browsers/

Pieter 2010-08-21 08:55:27

Your html and css seems unnecessarily complicated, i have edited my answer to include a sample menu control which i have used in a lot of places, its also very easy to style it.

Vinay B R 2010-08-22 18:20:53

Answer 2

+2 A:

IE7 Dropdown

As Sotiris mentioned, the easiest fix for IE7 would be to give ul#menu > li > ul a fixed width. This would cause the child <li> and <a> elements to properly take 100% of their parent width.

What's currently happening in IE7 is that your dropdown menu width is being determined by the length of your longest child element on account of the white-space: nowrap property. IE7 then doesn't properly apply this to the dropdown's <ul>, which instead takes its width from the top level menu item (104 pixels in your case).

If you still want to keep the dynamic width menus, you can fix it in IE7 with a snippet of jQuery that loops through all your links on load, finds the widest one and sets the parent <ul> to that width. It should be run in your $(window).load event handler, just after you set all ul#menu > li ul to display: block:

// Nodig om de width te kunnen raadplegen
$("ul#menu > li ul").css("display", "block");

// Loop through all dropdowns and find widest child link in each
$('ul.children').each(function(){       

    // Find widest link in each submenu
    var widest = 0;
    $(this).children('li').each(function(){
         if($(this).width() > widest)
              widest = $(this).width();
    });

    // Set submenu width to widest child link
    if(widest != 0)
         $(this).width(widest);

});

To fix the centered items, you'll also need to remove the text-align: center from this rule:

ul#menu > li{
    background: url(img/menuitem.png) left top;
    display: block;
    float: left;
    height: 36px;
    margin-right: 1px;
    position: relative;
    width: 104px;
}

Finally, you'll need to make sure the hasLayout flag is set properly on your dropdown links. You can do this by setting zoom: 1 on the following rule:

ul#menu > li > a, ul#menu > li > ul a {
    zoom: 1;
    display: block;
    text-decoration: none;
    white-space: nowrap;
}

Firefox 3.5 Submenu Indicator

This is an easier fix. Add the ul#menu > li > ul > li a declaration and change your span.sf-sub-indicator rule as follows:

/* Makes the link a coordinate map for span.sf-ub-indicator */
ul#menu > li > ul > li a {        
    position: relative;  
    padding-right: 10px;
}

ul#menu > li > ul > li a > span.sf-sub-indicator {
    position: absolute;
    top: 0;
    right: 0;
}

This will absolutely position the indicator to the far right of your link. Note you'll need to apply this fix for IE7 as well otherwise your submenus will be pushed down one link too far.

Pat 2010-08-23 12:57:06

That fixes the Firefox layout bug, thanks! But in IE7 (and IE8 with compatibility mode) there's still a small white gap between menu items that disappears when I mouse over a menu option: http://a.imageshack.us/img824/4053/ie7q.jpg I've searched for margin and padding that no longer make sense in my CSS code, but I couldn't come up with anything.

Pieter 2010-08-23 18:19:43

Glad to hear. As for the gap that's the famous IE hasLayout bug. Add `zoom: 1` to this rule in your stylesheet: `ul#menu > li > a, ul#menu > li > ul a`. (see my updated example).

Pat 2010-08-23 18:38:20

We're so close... the gap is gone, but the little arrows aren't yet centered vertically like they should be.

Pieter 2010-08-23 18:44:08

See my edits - I've explicitly set each `<a>` as a coordinate map for absolutely positioned children by setting the `position: relative` rule on it. For good measure I've also added 10px of right padding so the indicator doesn't overlap your menu item text.

Pat 2010-08-23 19:30:11

Great, that works! Well, thanks for your help... the bounty is yours.

Pieter 2010-08-24 08:48:37

ansaurus

tags:

views:

answers:

Why does this menu render poorly in Firefox 3.5 and IE7? How do I adapt?

related questions