Hi,
The problem is that you are floating elements without widths and while you can get away with it in some cases, its not recommended and advised in the specs that all floats should have a width defined.
However with a bit of messing around you can get something that works.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head>
<title>horizontal navbar</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<style type="text/css" media="all">
#nav {
background: #ccc;
float: left;
width: 500px;
border: 1px solid #000;
}
#nav ul{
margin: 0;
padding: 0;
list-style: none;
font: small/1.5em verdana, sans-serif;
font-weight: bold;
}
#nav li {
margin: 0;
padding: 0;
list-style: none;
}
* html #nav li{float:left}/* for ie*/
#nav a {
float: left;
padding: 6px 10px;
text-decoration: none;
color: #555;
background: #eee;
border-right: 1px solid #000;
}
#nav a:hover {
color: #000;
background: #ccc;
}
.clearer{
height:1px;
overflow:hidden;
clear:both;
margin-top:-1px;
}
</style>
</head>
<body>
<div id="nav">
<ul>
<li><a href="#">home</a></li>
<li><a href="#">news</a></li>
<li><a href="#">galery</a></li>
<li><a href="#">contact</a></li>
<li><a href="#">sitemap</a></li>
</ul>
<br class="clearer" />
</div>
</body>
</html>
Works in NN6.2, IE6, Firefox and OPera7.
Paul
How do you handle your horizontal nav bars?
Bookmarks