seth's horizontal list
Seth's horizontal list is one of the more elegant navigational menus I've seen. Considering how well it performs in multiple browsers, I was disheartened by a blocker in one of the more popular ones:
For whatever reason, a second border often appears in Internet Explorer 6.00 (check in IE). This line didn't — much surprise to me — show in IE 5.01/5.5. Mozilla Firefox displayed the list as it was intended.
fix
Dropped border-top from #navigation, which seems to have caused the appearance of the second (undesired) border in IE6/Win. Replaced with:
background: url(/imx/pixel/grey.gif) repeat-x 0 50%;
The above repeats a single grey pixel horizontally, in the vertical center of the navigation div. This solution has worked quite well in every browser I've tested with since.
holly hack
Added the Holly Hack (search) so that the horizontal menu doesn't shrink in older versions of IE.
the code
HTML
<div id="navigation">
<ul>
<li id="active"><a href="#" id="current">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
</ul>
</div>
CSS
/* Start Holly Hack, hidden from MacIE. \*/
* html #navigation ul li {
height: 1%;
}
/* End Holly Hack. */
#navigation {
margin: 10px auto 0px auto;
background: url(/imx/pixel/grey.gif) repeat-x 0 50%;
font-size: 12px;
z-index: 1;
}
#navigation ul {
list-style-type: none;
text-align: center;
margin: 0px;
padding: 0px;
z-index: 2;
}
#navigation li {
display: inline;
text-align: center;
margin: 0px 5px;
}
#navigation li a {
padding: 1px 5px;
color: #666666;
background-color: #ffffff;
border: 1px solid #cccccc;
text-decoration: none;
}
#navigation li a:hover, #navigation li a#current {
color: #000000;
border: 1px solid #666666;
border-top: 2px solid #666666;
border-bottom: 2px solid #666666;
}