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


Tags: html,css,internet-explorer,cross-browser

Problem :

Have a look at the menus on this page: http://www.pieterdedecker.be/labs/vspwpg/?page_id=96

They look okay in Chrome 5 (above) and IE8 (below).

Chrome 5 IE8

When I load the page into Firefox 3.5 (above) or IE7 (below) something goes wrong.

Firefox 3.5 IE7

In the first case, the arrows on the right have moved to the next row. In the second case, the menu falls apart entirely.

How do I adapt the website I'm developing to this? Is it because FF3.5 and IE7 haven't implemented W3C standards entirely or simply because my CSS doesn't make sense? My HTML code has been validated XHTML 1.0 Strict as shown here.

Update - 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://spoon.net/browsers



Solution :

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.


    CSS Howto..

    how to write this code as link click animation

    CSS - How to center an image without class or id?

    How to cut divs both ways to keep the objects in center?

    How to slide up / slide down an element with Zepto on mobile devices?

    HTML/CSS: how to force text within a tag to be styled with font-style: italic !important;

    How can i prevent divs from moving while resizing the page

    How to use relative/absolute paths in css URLs?

    How to change table width using css

    How to add css styles on aria-hidden attribute

    how to place last div into right top corner of parent div? (css)

    How do you input CSS into an animate

    How Can I Use CSS :after to Add a Glyphicon Element to an Input

    How to make overflow blocks working well ()

    Bootstrap 3 - How to change the hyperlink title text showing as tooltip using javascript/jquery?

    how to style this form by css (mailchimp)

    CSS: How to drill all the underlying layers up to the background?

    How to fix clipped text over 3D transform image on Safari?

    How do I achieve this animation using javascript/jquery? [closed]

    How to change placeholder color on focus?

    How to fix content leaks out of an element despite use of “overflow:hidden”?

    How can I exclude certain elements from css property that has been applied to their parent without using the style attribute

    How to input block of text next to Font Awesome icon in CSS?

    How to have responsive widths for labels and inputs using css

    How to avoid CSS styles to be applied for particular element

    How to properly align two elements in CSS

    How do I make an image shrink and grow according to re-sizing the browser.

    How to add css and js files on node pages independent of the theme?

    CSS: How to position two elements on top of each other, without specifying a height?

    CSS: How can I hide a class which has no other class or ID?

    CSS: How to set 100% width on the first li of ul