Broken horizontal menus in Internet Explorer

Problem

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

To avoid that use zoom:1 on <a /> elements. This will enalble hasLayout property and will cause lists to ignore white spaces.

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>

Giving zoom:1 to <li /> will also work but list element will have 3px "top-margin" so it will not sole all problems.