The problems behind
This page is a local copy of the css-discuss main page. We are particularly interested in
the inline menu, because there are some rendering problems with both Explorers (version 5 and 6 for Windows). First, Internet Explorer 6
needs only a DOCTYPE declaration, such as this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
We use a strict DTD to force IE6 in compliant mode or something similar to a compliant mode, according to IE's weird ideas about standard compliance.
With IE5 things are much more complicated. Considering the fact that IE5 doesn't apply margins, padding and borders to an inline element until it gains layout, we have to try another way to fix the problems that are basically two:
- extra vertical space applied to menu buttons;
- jump on :hover
To solve both riddles, we have to reset all margins and padding previously applied to the list and its descendants. Then we use the following code with CSS hacks:
/*\*/ * html #navigate li a, * html #navigate li span {
height /*\*/: 0;
margin-top /*\*/: 1px;
margin-bottom /*\*/: 0;
padding /*\*/: 2px 3px;
border-top /*\*/: 1px solid #cc9;
border-bottom /*\*/: 1px solid #fff;
position /*\*/: relative;
top /*\*/: 5px;
width /*\*/: auto; }/**/
Using margins and 'position: relative', together with 'width', 'height', and 'padding',
we solve the dimensional bug and avoid the extra vertical space. Setting the top and bottom border of the <a> element, we avoid
the jump on :hover. Here's how it looks now in Internet Explorer 5:
However, there are still some differences. A good solution, alternative to 'display: inline', consists in applying the float model
to list items and anchors.