IE6 Whitespace Bug
The better I get at css (and I am getting better) I really start to understand designers hatred for IE. I guess I always knew it on some level but when you are really trying to write clean code it starts to upset you that you have to hunt down IE6 specific bugs. My advise to everyone working with css is to get your layout/design working in a standards compliant browser and then double back to find out what bugs you need to fix. The bug I came across today (I have before but this is a great fix) is the IE Whitespace bug.
I was trying to create a block level list elements for a navigation like flow. When you use the code below and check the output in FireFox everything is exactly how you want it. In IE though there is extra space between elements. Here is the code and what it looks like in both browsers. The one on the left is FF and the right is IE6.
<head>
<title>Lists Example</title>
<style>
#navigation {
width:200px;
}
h3 {
margin:0px;
padding:0px;
border-bottom:1px dotted #272727;
}
ul {
margin:0px;
padding:0px;
list-style-type:none;
}
li a {
color: #759398;
text-decoration: none;
padding-top: 4px;
padding-right: 0px;
padding-bottom: 4px;
padding-left: 2px;
display: block;
border-bottom:1px dotted #272727;
}
li a:hover {
text-decoration: none;
background-color: #132022;
color: #ffffff;
}
</style>
</head>
<body>
<div id="navigation">
<h3>Navigation</h3>
<ul>
<li><a href="##">Menu Item 1</a></li>
<li><a href="##">Menu Item 2</a></li>
<li><a href="##">Menu Item 3</a></li>
<li><a href="##">Menu Item 4</a></li>
<li><a href="##">Menu Item 5</a></li>
<li><a href="##">Menu Item 6</a></li>
<li><a href="##">Menu Item 7</a></li>
<li><a href="##">Menu Item 8</a></li>
<li><a href="##">Menu Item 9</a></li>
<li><a href="##">Menu Item 10</a></li>
</ul>
</div>
</body>
</html>
One solution to the problem I found that I really like was hicksdesign.co.uk. After reading through the comments though some users pointed out that the css may not validate so I ended up going with a solution from the comments. Placing the following code in your css will fix the problem and the css will validate. The final outlook looks good in all the browsers that I tested.
* html ul li a {
height:1em;
}
</style>
