CSS support in Internet Explorer 6 and 7 is often buggy and incomplete. This turns out to be a real pain in the neck when we want to stylize CSS menus. This post is going to provide some useful rules to make everything work even in these browsers.
Rule 1: give a dimension to menu elements
You should always give a dimension to menu elements. For example, you can use the height: 100% fix:
#navigation {
margin: 0;
padding: 0;
height: 100%;
list-style: none;
}
#navigation li {
float: left;
height: 100%;
padding: 0 1em;
}
#navigation a {
float: left;
height: 100%;
padding: 0.5em 0;
}
Rule 2: make also links float when you use floating
IE6 has an obtuse bug that makes links within a floated menu to expand without control if those links are not floated:
#navigation a {
float: left;
height: 100%;
padding: 0.5em 0;
}
Rule 3: assign a display role to navigation items
You should always specify a display role for navigation items in order to prevent IE from applying some of its wrong algorithms:
#navigation li, #navigation a {display: block;}
Rule 4: beware of :hover in IE6
IE6 sometimes doesn't honor the dynamic styles assigned to a link element or its descendants on :hover:
#navigation a:hover span {
background: url(image.gif) no-repeat;
}
To fix this problem, simply give the following declaration to IE6:
<head>
<!--[if lte IE 6]>
<style type="text/css">
#navigation a {background-position: 0 0;}
</style>
<![endif]-->
</head>
Rule 5: beware of background images on inline elements
If you have an inline menu with some background images on each link, IE 6 (and sometimes even 7) might not display your images. Here's the fix:
#navigation a {
display: inline;
zoom: 1;
}
Rule 6: beware of the doubled margin bug
This kind of bug affects only IE 6 and it occurs when you set a left or right margin on a floated element that goes in the same direction of the float. To fix this bug, simply add this declaration to the affected element:
#navigation li {
display: inline;
}