Is there a better way to eliminate white space in Navigation Bar in IE

White Space in Navigation Bar

[PowerUp]

Is there a good way to remove white space in the Navigation Bar in IE?

<ul>
<li><a href="http://www.widget.com/">Home</a></li>
<li><a href="http://www.widget.com/Guide1">Summary Guide</a></li>
<li><a href="http://www.widget.com/Guide2/">Summary</a></li>
</ul>

I code my HTML like above for the sake of easier readability but the white space will appear.

<ul>
<li><a href="http://www.widget.com/">Home</a></li><li><a href="http://www.widget.com/Guide1">Summary Guide</a></li><li><a href="http://www.widget.com/Guide2/">Summary</a></li>
</ul>

If I code my HTML like the 2nd example, then the white space disappears but is so difficult to read. Imagine if there are more than 10 links....

I've read that the problem with the white space is because IE interprets "</li> <li>" (white space) in the HTML and thus gives you that extra line spacing in the navigation bar. And so if I don't leave any space between the "</li><li>" there won't be the white space.

Is there a way to eliminate that white space but at the same time keep readability of the HTML?

[Setek]

Depending on how you are actually laying out this navigation list, but I'm going to assume a couple of things:

1. the

   li a

   's are displayed as block; and
   
2. the navigation list is vertical.

What you can do, is set the

li

's themselves to display as inline elements - thus removing the extra line in IE.

This changes nothing in a standards-compliant browser, so you're fine with forwards-compatibility with the new IE coming soon(ish)(perhaps)(possibly making things worse).

:)

[PowerUp]

Hi Setek,

You are right,
1. The li's are displayed as block.
2. The Navigation bar is Vertical.

If I change the li's to display as inline, then the background colour doesn't extend up to the right border. It stops at the last alphabet of the word.

[Setek]

Does the background colour have to be on the

li

?

Could it be on the

a

itself?

[edit]
Or the

ul

!
[/edit]

Because that's the only good workaround I know to get IE to remove the extra space.

Next best option I know of is to play with line-height, but as I said, it's not a good solution.

[edited by: Setek at 9:40 am (utc) on Aug. 30, 2006]