April 4th, 2007 Add Your Comments Bookmark and Share

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?!