So I’ve already explained how to fix what is probably one of the most annoying bugs in browser rendering history, the 3 pixel vertical gaps that appear between Divs in IE6. Whilst fixing this I also came across another bug that appears to insert a 3 pixel horizontal gap/margin when you add an element to a Div, here I’ll explain how to fix that one.
OK, you’re ready for it…remove line breaks from the source document. Seriously. In an amazing act of stupidity for some unknown reason Internet Explorer 6 takes the carriage return between the end of the opening Div tag and the begeinning of the element tag in the source document as a new line and insterts a 3 pixel gap between the top of the Div and the element.
For example this code:-
<div id="div1"><img src="images/logo.jpg"></div>
will render correctly in IE6 whilst
<div id="div1">
<img src="images/logo.jpg">
</div>
will not. It’s really as simple as removing the line breaks in your source document, now who would have thought that?!
4 Responses to “Fixing A 3 Pixel Horizontal Gap In Internet Explorer 6”
newbiecsser
March 26, 2009
…internet explorer makes me cry.
|Caden Grant
April 2, 2009
Wow who would of thought that. I had been trying to fix this problem for 5 hours straight and I couldn’t figure it out… then I read what you said and it worked. Thanks a lot!
|Marta
September 14, 2009
You, sir, are my hero. I spent 3h trying to figure out what’s wrong with my styles.
[bow]
|Telkaholic
November 16, 2009
Thanks so much for posting this fix. IE6 makes my blood boil!
|