Thu, 2006-05-04 12:15
Hi,
I'm quite new to CSS and have just run into some problems. I'm trying to create a horizontal navbar, but no matter what there's some annoying whitespace ruining the layout. In firefox it is rendered to the left of each button, in ie it's opposite, to the right. Here's the relevant code:
XHTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head></head> <body> <div id="ghost"> <div id="navbar"> <ul> <li><a href="">Nav 1</a></li> <li><a href="">Nav 2</a></li> <li><a href="">Nav 3</a></li> <li><a href="">Nav 4</a></li> <li><a href="">Nav 5t</a></li> </ul> </div> </body> </html>
And the CSS:
#navbar {
position: absolute; top: 0; left: 0;
width: 100%;
height: 30px;
background-color: #82a1d1;
border-bottom: solid #000 1px;
}
#navbar ul {
margin: 0;
padding: 0;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
color: #000;
line-height: 30px;
white-space: nowrap;
cursor: default;
}
#navbar ul li {
list-style-type: none;
display: inline;
border-right: solid #000 1px;
padding: 0;
margin: 0;
}
#navbar ul li a:link, #navbar ul li a:visited {
text-decoration: none;
padding: 0;
margin: 0;
color: #000;
}
#navbar ul li a:hover {
background-color: #526684;
color: #fff;
}
I know it's not too pretty at the moment, just trying to get rid of that whitespace for now. Some of the paddings and margins are probably useless, just wanted to rule out the possibility of such issues.
Also, my validator won't accept a value of inline for display in the '#navbar ul li'-selector, but nontheless it seems to render fine in all tested browsers, and to my understanding, it should be valid CSS. What's the catch?
Any help is greatly appreciated.
Thanks in advance /
Niklas
Thu, 2006-05-04 12:58
#1
[Solved] Whitespace problem with horizontal navbar
Why not try floating the lists elements and setting the anchors to block to cover all the list area, and removing the height on the menu bar, plus a little padding on the anchor text to space it.
#navbar {
position: absolute;
top: 0;
left: 0;
width: 100%;
background-color: #82a1d1;
border-bottom: solid #000 1px;
}
#navbar ul {
margin: 0;
padding: 0;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
line-height: 30px;
white-space: nowrap;
}
#navbar ul li {
list-style-type: none;
float:left;
width:4em;
border-right: solid #000 1px;
}
#navbar ul li a:link, #navbar ul li a:visited {
text-decoration: none;
display:block;
height:100%;
padding:0 5px;
color:#000;
}
#navbar ul li a:hover {
background-color: #526684;
color: #fff;
}
Thu, 2006-05-04 13:24
#2
[Solved] Whitespace problem with horizontal navbar
Works like a charm! Thanks a lot. 