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 make a CSS transition work “backwards”?

    How to use Bootstrap3 media queries for custom CSS? [closed]

    How to apply padding to an HTML input element?

    CSS: How to select only the first non-adjacent sibling after the element

    Show/Hide inline Form

    How to detect CSS translate3d without the webkit context?

    How can I create a “tooltip tail” using pure CSS?

    HTML/CSS How to auto-adjust the width of my container in order to show several images horizontally displayed?

    How to center align text over CSS shape?

    How do you create tabstops in XHTML?

    How to hide p1 within div

    How to bottom center a span inside a list item

    How to write CSS code without using :not selector?

    How can I change the css class rules using jQuery?

    How to Style Template field in Grid View (aspx page and CSS attached)

    CSS: how to get scrollbars responsive for div inside container when user resizes it upwards

    how do I find out which skin Telerik's RADeditor is using by default?

    How do I add a dropdown menu to my css menu?

    CSS - How to break a line only at division borders

    How to control the speed of a SVG line animation with CSS

    How can you separate the navigation bar list from the body list?

    How to use relative referencing in CSS files

    How to make rounded tabs with css? [closed]

    How to deal with different stylesheets (WYSIWYG Editor and Webpage one) in the same page?

    how to select a Div ID that does not have a specifc class/es

    JQuery : How to disable mouse move vertically?

    How to add js and css files in ASP.net Core?

    How can I get the seletced filename from file button?

    How to break text inside a parent div with white-space:nowrap in CSS?

    CSS How to get rid of border that appears around custom button on and after click