A long-standing bug in Internet Explorer is the gaps it likes to insert between list items that contain block level elements, if there is any whitespace between the list items in the markup. You have probably seen it in action more times than you want to.

the release version of IE 7 still suffers from it

This bug was thought to have been fixed in IE 7 RC 1, and perhaps it was. That doesn’t really matter since the release version of IE 7 still suffers from it in certain circumstances. Just in case you’re looking for something that will fix this problem in both IE 6 and IE 7, I wanted to share this piece of knowledge. I originally thought this would soon be obsolete, but unfortunately that does not seem to be the case.

There are several different ways to skin this cat, but I found this the simplest to implement.

Assigning a width to the links. Like this:

li {
width:200px;
padding:0px;
margin:0px;}

*If you do this make sure to have a set width on your surrounding element.

I’ve found that this works in both IE 6 & IE.

This entry was posted on Wednesday, January 9th, 2008 at 4:44 pm and is filed under Web Design. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.