How to fix the Internet Explorer 6 (IE6) whitespace bug

As any web designer will tell you, Internet Explorer, especially version 6, is the bane of our existence (you can buy “I hate IE 6″ tee-shirts now). Unfortunately for us, around 60% of web users are using Internet Explorer as their default browser and around 15% are still on IE6.

If you’ve played with web design to any extent you’ve probably experienced some of Internet Explorers renowned problems for yourself. Such as;

• It rarely displays CSS code as it should and throws in extra margins/padding/line-height wherever it feels like
• IE nearly always requires a second style sheet to be created full of crude hacks to overcome the above listed problems
• No PNG support, turns all your transparencies into 50% grey
• It can still somehow fail to correctly display sites that adhere to WC3 standards
• Fails to display unordered list blocks in 10 different ways
• And the point of this article, of the 10 different unordered list errors there’s 20 different solutions, and the correct one is never the same for 2 people

After creating my new wordpress theme for this site, i had the even stranger problem that in IE6 the blocks in my right column displayed correctly, while the left column blocks where showing as around 3 times the height even though they were using the same rules. Obviously this totally ruined the look of the site.

The solution to the problem varies depending on exactly how your unordered lists are set up.

Solution #1 is to float your anchor tags like so;

ul a { display: block; float: left; clear: left; }

This however prevents your link from filling all available horizontal space, so the red blocks you see when rolling over the links on my site stop at the right end of the text, rather then covering the full width of the column.

Solution #2 is to set a solid border on the bottom of your list elements.

ul li { border-bottom: 1px solid #666; }

Having a definitive edge to the block for some reason causes IE6 to find the bottom of the block rather then adding whatever size chunk of white space it feels like. Though having a solid line at the bottom of each block may not be suitable for your design.

My site for example already has a grey border at the top of each block, a grey border at the bottom would make the lines between blocks too thick, while a white border would put off the effect of the red when rolling over the links.

Solution #3 is having your list element displaying inline, while your anchors display as blocks. If this works for you there are no complications with borders or rollover widths etc.

ul li { display: inline;}

ul li a { display: block;}

Solution #4 is setting your anchor height to 1em, this makes the height of the block as small as possible and just fits your text and top / bottom padding into the block.

ul li a { height:1em;}

This works fine for single lines of text, but if any of your link titles flow down to a second line, both lines are compacted into a single box, not a great look.

Solution #5 After listing these solutions you’d think my problem was easily solved, but no. Of course none of these worked for my particular setup. In the end giving my list elements negative margins like so;

ul li { border-bottom: 1px solid #ffffff; display:block; margin-bottom: -1px;}

This arrangement adds the solid border to define the bottom of the element as mentioned before, while hiding the border itself and preserving the design of the site.

All this for 1 internet browser *sigh*. Hopefully if your experiencing this problem with your current design one of the above solutions is the answer for you.

In the mean time, if you’re still using internet explorer do yourself a favour and download a copy of Firefox

What are your thoughts?

Have you got any other experiences / solutions to this problem? I’d love to hear them.