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 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.

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:
  • http://www.usefulconcept.com joshua cyr

    I like using zoom:1 myself. I have also run into a different whitespace issue with nested list items. The solution below isn’t related to the haslayout bug, but seems to do the trick. No clue why though.

    ul, li, li a { vertical-align:bottom;}

    http://www.usefulconcept.com/index.cfm/2007/12/3/IE-nested-list-item-whitespace-solution-verticalalignbottom

  • http://therealdanvega.com Dan Vega

    Joshua,
    That solution makes sense as well. I believe there are many solutions out there. The ultimate solution will hopefully come in the form of a standards compliant IE :)

  • http://www.johnsthomas.com John

    I love me some Flex/Flash for that very reason. I use to care about validation, and the whole standards compliant thing, but I am starting to think its a waste of time. How many years have standards been around now, and we are still where we were 12 years ago…Hacking several versions of the same site for each browser. I hated dealing with it back then, and I hate it now. I don’t think IE will ever be fully compliant because its not Microsofts style.

    I do the opposite for css, I build for IE6 first. My server reports show most people (not designers) still use IE6 or 7. I get those dialed in perfect, and then hack for standards compliancy. After years of the opposite, I tried it, and it took me half the time. It’s worth giving it a go sometime.

    Great post, and great hack. I just ran across your site and I am liking what I have found.

  • http://therealdanvega.com Dan Vega

    John,
    Thanks for the feedback. I guess you really could take it on a case by case basis. For example when working on my site analytics tells me the 54% of my visitors are firefox users while of the 38% that are IE users use 7.0. Everyone has their way of doing it but I just feel that if you create for standards first then you actually learn what code does what! Thanks for reading!

  • http://christianready.com/ Christian Ready

    It appears you have encountered the infamous hasLayout bug. Using zoom:1 is a pretty easy way to fix this.

  • http://www.matthewleichty.com/ Matt Leichty

    I found in one case that I had that only using BOTH of these allowed it to work:

    ul#myelement li {
    vertical-align: bottom; zoom: 1;
    }

    Dropping either declaration caused a rendering problem, albeit not the same problem. Doing both fixed it. Why? Who TF knows.

  • http://www.towerwebdesign.com TWD

    I had a similar problem; after scouring the internet for help, I found one comment that IE6 adds whitespace in LIs. When I ran them together without any spaces or line breaks in the code the extra space disappeared.

  • Joel Pittet

    joshua cyr: your solution saved my ass! Thank you, thank you! I am thinking of using this where ever I can as well, http://www.savethedevelopers.org/

  • El John

    Great Job!!!

  • http://www.imod.co.za Chris M

    <style>
    * html ul li a {
    height:1em;
    }
    </style>

    Awesome fix, thank you so much!!

  • http://www.nilshendriks.com Nils Hendriks

    * html ul li a { height:1% !important; } works all the time, but without the !important bits there are times it will still have the whitespace.
    Note that 1% also works, just like 1 em;

  • Jon Dear

    Thanks a lot. I spent all day trying to stop ie6 and 7 flickering on hover in a nav menu, and from increasing vertical padding, and changing left right widths.

    This worked on ie6: * html ul li a {height:1em;}
    This worked on ie7: ul, li, li a {vertical-align: bottom; zoom: 1;}

  • Meir

    Great fix. I’ve been suffering this for years, thanks a lot!

  • Dimitris

    +1 Thank you indeed!

  • Adam Meyer

    Thank you for this! I was pulling out my hair.

  • http://ReverseWineSnob.com Jon

    Hello, I realize this is a really old post but hoping you can help. I have a similar problem at my site (uses blogger)…in IE8 and IE9, on the post pages only, I have a huge amount of white space under the footer on most posts. Pulling my hair out trying to fix this. I’m definitely not a programmer but am able to modify my html…I tried a few of the fixes noted but they did not seem to help although not sure I was doing it in the right place.

    If there’s any help you can give me I would really appreciate it!
    Thanks
    http://ReverseWineSnob.com

  • http://ReverseWineSnob.com Jon

    You can ignore my last comment, I got it fixed, although no idea why the fix worked. I deleted the following from my template:
    <script type=’text/javascript’>
    window.setTimeout(function() {
    document.body.className = document.body.className.replace(&#39;loading&#39;, &#39;&#39;);
    }, 10);
    </script>

    So far no negative repercussions but we’ll see…not even sure what this code does :)