The problem with Internet Explorer 5 (Win)
This page is a local copy of the original Ian Jacobs homepage at W3C. As you can see, the original tabbed menu developed by Eric Meyer doesn't work with Internet Explorer 5 (Win). The problem is well known: IE5 doesn't apply borders, margins and padding to an inline element until it gains layout.
If we specify a minimal height for the element (such as 'height: 0'), IE5 considers this element
as a block-level element, and applies all the properties mentioned above. However, it displays the element as an inline
element. Welcome to IE5 (Win) world!
The CSS fix
Here's a simple workaround to fix the problem:
/* tabbed styles */
#navigation {
padding: 3px 0; margin: 0;
border-bottom: 1px solid #778;
font: bold 12px Verdana, sans-serif;
}
/*\*/ * html #navigation {
padding /*\*/: 0;
}
/**/
/*\*/ * html #navigation li a {
height /*\*/: 0;
margin-top /*\*/: 0px;
margin-bottom /*\*/: -2px}
/**/
#navigation li {
list-style: none;
margin: 0;
display: inline;
}
#navigation li a {
padding: 3px 0.5em;
margin-left: 3px;
border: 1px solid #778;
border-bottom: none;
background: #DDE;
text-decoration: none;
}
#navigation li a:link {color: #448;}
#navigation li a:visited {color: #667;}
#navigation li a:hover {
color: #000;
background: #AAE;
border-color: #227;
}
I've only added the code marked in red. With this code, we reset the original padding of the <ul> element,
and prevent IE5 from adding an extra space by declaring a negative bottom margin for the <a> element.
O sancta simplicitas! Here's how it looks now in IE5 (Win):
