IE-Win Bug: Whitespace Between List Items

While in the course of designing this blog, I came across an oft-mentioned Windows Internet Explorer bug: Extra whitespace between list items even after applying this CSS hack to tackle the extra line-height placed by IE when display:block is applied to list items.

I’ll assume you know what I mean if you’re reading this post, so let me go on to the actual code.

This is the original HTML. You could use it to search the HTML source of the main page of this blog to actually see the list in question. That is, if you want to.

<div id="catlist">
<ul>
<li><a href="">Very Personal</a></li>
<li><a href="">Personal</a></li>
<li><a href="">Impersonal</a></li>
</ul>
</div>

And the original CSS:

#catlist {
    padding:1em 0 1em 0;
}
#catlist ul {
    list-style-type:none;
    padding:0;
    margin:0;
}
#catlist ul li{
    border:none;
    padding:0;
    margin:0;
    list-style-type:none;
    width:100%;
}

#catlist li {
    padding:0;
    margin:0;
}

#catlist li a {
    color: #9ACE00;
    background: #000000;
    padding: 5px 0 5px 0;
    text-align:center;
    margin: 0 0 0.1em 0;
    text-decoration: none;
    font-size:1.1em;
    display: block;
    float: left;
    clear: left;
    width:100%;
}

And the solution? Quite simple really.

#catlist li{
    padding:0;
    margin:0;
    vertical-align: bottom; /* The IE-Win Fix! */
}

This is a pretty well-documented fix. However, it is quite common to place the vertical-align:bottom at the wrong location (just like I did). Initially, I placed it at #catlist li a, instead of its parent #catlist li. Placing the fix at #catlist li solved the problem immediately. Joy…

Anyway, hopefully, this post has helped you or will help you face this stupid IE bug. Of course, feel free to dump any errors you find in this post my way. I’ll try to take a look at them ASAP.

P.S: Remember to apply the hack initially linked to at the beginning of this post first, i.e. float:left; display:block, and clear:left to the ul, before even considering vertical-align:bottom. If for some reason layout ends up screwy in Firefox, apply a float:none to the li a, i.e. li>a {float:none}.