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.

One solution to the problem I found that I really like was 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.

Categories: Web Development

About The Author

My name is Dan Vega and I am a Software Developer based out of Cleveland OH. I love to play with new technologies and write about my experiences here. When I am not busy being a full time geek I love to lift heavy weights and hang out with friends and family. If you have any questions please don't hesitate to contact me.

Follow me on: