Unordered list empty space problem

HTML & CSS
1

I’m creating a simple navigation with unordered list. The HTML code is pretty much straightforward:

<nav id="mainav">
	<ul>
		<li><a href="#">Main item 1</a></li>
		<li><a href="#">Main item 2</a></li>
		<li><a href="#">Main item 3</a></li>
		<li><a href="#">Main item 4</a></li>
		<li><a href="#">Main item 5</a></li>
	</ul>
</nav>

And the CSS:

#mainav ul {
	display: inline-block;
	border-left: 1px solid #000;
	border-right: 1px solid #666;
}

#mainav ul li {
	display: inline-block;
	*display: inline; /* IE7 inline-block hack */
	*zoom: 1;
	padding: 15px 0px;
}

#mainav ul li a {
	padding: 15px;
	color: #ccc;
	border-left: 1px solid #666;
	border-right: 1px solid #000;
}

#mainav ul li a:hover {
	background: #292929;
	color: #fff;
}

But when I have the HTML stacked one list item below another I run into a problem where I have some 2-3 pixels empty space, so I solved it by having the HTML into one line, like this:

<nav id="mainav">
	<ul>
		<li><a href="#">Main item 1</a></li><li><a href="#">Main item 2</a></li><li><a href="#">Main item 3</a></li><li><a href="#">Main item 4</a></li><li><a href="#">Main item 5</a></li>
	</ul>
</nav>

I still wonder why does it happen. As far as I know there are no left/right margins nor padding applied to the list elements.

You can see it both version visually here. The first one is the good one, while the second one is the one I don’t like it.

On the other hand, in the CSS I’m using “display: inline-block;” rather than floating the elements, and I apply the hacks for IE. I wonder is it needed to apply those * hacks to the <ul> elements, or just for the <li> elements? Or should I just use the good old floating?

2

Hi,

When you use inline-block then the element behaves like text and and gaps between adjacent blocks are treated like the space between words in a sentence. You wouldn’t want all your words buncheduplikethiswould you:)

There is a solution in an old css quiz we did and you can find it here.

3

It still does not work, but I’m sure I’m missing something. Maybe because I’m using the <nav> html5 elements and apply the #mainav to that? Here is my CSS code:

#mainav ul {
	display: table;
	width:100%;
	border-left: 1px solid #000;
	border-right: 1px solid #666;
}

#mainav ul li {
	display: inline-block;
	*display: inline; /* IE7 inline-block hack */
	*zoom: 1;
	word-spacing: 0;
	padding: 15px 0px;
}

#mainav ul li a {
	padding: 15px;
	color: #ccc;
	border-left: 1px solid #666;
	border-right: 1px solid #000;
}

#mainav ul li a:hover {
	background: #292929;
	color: #fff;
}
4

HI,

Here you go :slight_smile:

[
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style>
#mainav ul {
	display: table;
	width:100%;
	border-left: 1px solid #000;
	border-right: 1px solid #666;
 word-spacing:-.25em; /* hide whitespace nodes in all modern browsers (not for webkit)*/
	margin:0;
	padding:0;
	list-style:none;
}
#mainav ul li {
	display: inline-block;
	*display: inline; /* IE7 inline-block hack */
	*zoom: 1;
 word-spacing:0; /* reset from parent */
	padding: 15px 0px;
}
#mainav ul li a {
	padding: 15px;
	color: #ccc;
	border-left: 1px solid #666;
	border-right: 1px solid #000;
}
 
#mainav ul li a:hover {
	background: #292929;
	color: #fff;
}

</style>
</head>

<body>
<nav id="mainav">
		<ul>
				<li><a href="#">Main item 1</a></li>
				<li><a href="#">Main item 2</a></li>
				<li><a href="#">Main item 3</a></li>
				<li><a href="#">Main item 4</a></li>
				<li><a href="#">Main item 5</a></li>
		</ul>
</nav>
</body>
</html>