2 replies [Last post]
the_minstrel
Offline
newbie
Last seen: 14 years 25 weeks ago
Joined: 2006-05-04
Posts: 6
Points: 0

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

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 41 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

[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;
}

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

the_minstrel
Offline
newbie
Last seen: 14 years 25 weeks ago
Joined: 2006-05-04
Posts: 6
Points: 0

[Solved] Whitespace problem with horizontal navbar

Works like a charm! Thanks a lot. Smile