.navigation1 {
margin: 0 3em;
padding: 0.5em 0;
border-bottom: 1px solid;
text-align: center;
list-style: none;
}
.navigation1 li {
display: inline;
margin: 0 7px;
height: 0;
}
.navigation1 a:link, .navigation1 a:visited {
background: transparent;
color: #329;
}
.navigation1 a:hover {
background: transparent;
color: #c00;
}
<ul class="navigation1"> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> <li><a href="#">Link 4</a></li> <li><a href="#">Link 5</a></li> </ul>
The real problem with Internet Explorer 5 (Win) lies in its lack of support of certain CSS properties related to inline
elements. In fact, Internet Explorer 5 doesn't support the 'margin', 'padding' and 'border'
properties for inline elements. However, when we specify an explicit dimension (here marked in red in the CSS code) for an inline
element, that element will be managed by Internet Explorer 5 as a block-level element (with all the properties mentioned above
included). The only difference is that the element will be displayed as an inline element. Note that this is an explicit violation
of the W3C specs. In this example, we use
'height: 0' to avoid Internet Explorer 5 to display all the links without space between them, ignoring de facto
the declaration 'margin: 0 7px' for the <li> element.
.navigation2 {
margin: 0 3em;
padding: 0.5em 0;
border-bottom: 1px solid;
text-align: center;
list-style: none;
}
.navigation2 li {
display: inline;
margin: 0 7px;
height: 0;
}
.navigation2 a:link, .navigation2 a:visited {
background: transparent;;
color: #329;
padding: 4px;
border: 1px solid #000;
font-weight: bold;
text-decoration: none;
height: 0;
}
.navigation2 a:hover {
background: #329;
color: #fff;
}
/*\*/ * html body .navigation2 {
padding-top /*\*/: 16px;
padding-bottom /*\*/: 0;
}
/**/
The well-known solution of 'height: 0' works also in this case. Note that an extra padding for the
<a> element has been added. The hack marked in blue is used here to correct a wrong padding calculation
of Internet Explorer 5.
.navigation3 {
margin: 0 3em;
padding: 3px 0;
border-bottom: 1px solid;
text-align: center;
list-style: none;
}
.navigation3 li {
display: inline;
margin: 0 7px;
padding: 0;
height: 0;
}
.navigation3 a:link, .navigation3 a:visited {
font-weight: bold;
text-decoration: none;
background: transparent;
color: #329;
border: 1px solid #000;
border-bottom: none;
padding: 3px;
height: 0;
}
.navigation3 a:hover {
background: #329;
color: #fff;
}
.navigation3 a#current:link,
.navigation3 a#current:visited,
.navigation3 a#current:hover {
background: #329;
color: #fff;
font-weight: bold;
text-decoration: none;
padding-bottom: 3px;
}
/*\*/ * html body .navigation3 {
padding-top /*\*/: 0px;
padding-bottom /*\*/: 0px;
}
/**/
/*\*/ * html body .navigation3 a:link,
* html body .navigation3 a:visited {
padding /*\*/: 3px;
margin-bottom /*\*/: -3px;
}
/**/
/*\*/ * html body .navigation3 a#current:link,
* html body .navigation3 a#current:visited,
* html body .navigation3 a#current:hover {
padding-bottom /*\*/: 3px;
margin-bottom /*\*/: -3px;
}
/**/
<ul class="navigation1"> <li><a href="#" id="current">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> <li><a href="#">Link 4</a></li> <li><a href="#">Link 5</a></li> </ul>
This time we need a good deal of positioning hacks (marked in blue) to defeat Internet Explorer 5 and its odd ideas about the edges of a containing block. Negative margins reset the space created by padding (3 pixels), and this is the key for a similar result for Internet Explorer 5 and the other browsers. Note that here Internet Explorer 6 pretends to be a nice guy, and its behaviour is similar to Firefox 1.5 and Opera 9.
- “Would you tell me, please, which hack I ought to try to defeat Internet Explorer 5 bugs?”
- “That depends a good deal on what layout you want to get”, said the Cat.
- “I don't much care what -” said Alice.
- “Then it doesn't matter which hack you try” said the Cat.