How To/webdev/

IE whitespace bug in lists

Bug in Interner Explorer causing additional space between li elements.

Bug description - big margins between list elements

Internet Explorer sometimes treats white-spaces between <li /> elements as text.
It is very annoying when you are trying to build menu with block <a /> element inside <li /> elements.

Example: this will cause additional white-spaces between links!

<style type="text/css">
ul#a li a{display:block;}
</style>

<ul id="a">
<li><a href="#">item1</a>
<li><a href="#">item1</a>
</ul>

Solution: remove additional margin between list elements

To avoid that use zoom:1 on <a /> elements.

Example: this will work fine!

<style type="text/css">
ul#b li a{display:block; *zoom:1}
</style>

<ul id="b">
<li><a href="#">item1</a>
<li><a href="#">item1</a>
</ul>

Testcases

This will be broken in IE6:

• item1
• item2

This will work OK in IE6:

• item1
• item2