Shadow Box Creative Media

Blog

IE6, Floats, and HTML Comments
February 19, 2009

Internet Exploder Explorer 6 is the bane of a web developer’s existence — everyone in our industry knows this. And after so many years of working with IE6, you sometimes feel like you’ve seen everything it can do in terms of screwing up your website. However, back in November I had a new WTF moment when IE6 started throwing a huge gap between two floated divs.

This is what the page looked like, with a large gap between the footer and content divs:

gap

It took me a while to discover what the problem was, but in the end I was able to track it down. I use Steve Smith’s Float Nearly Everything method of clearing floats. However, I also tend to use a lot of HTML comments in my code — usually after every div, in fact, so that I end up with something like this:

 
<div id="container">
	<div id="branding">
		<h1>Some Site</h1>
	</div><!-- /branding -->
	<div id="mainnav">
		<ul>
			<li><a href="#">One</a></li>
			<li><a href="#">One</a></li>
			<li><a href="#">One</a></li>
		</ul>
	</div><!-- /mainnav -->
	<div id="content">
		<p>
			Lorem ipsum dolor sit amet, 
                        consectetur adipisicing elit, 
			sed do eiusmod tempor incididunt 
                        ut labore et dolore magna aliqua. 
		</p>
	</div><!-- /content -->
</div><!-- /container -->
 

Well, it turns out that IE6 can choke on all those HTML comments, causing it to place a large gap between certain divs. So, to remedy this, I had to remove all my HTML comments from the code. The end result:

no-gap

So much for easy-to-read code. Thanks IE6.

Posted by Eric in Tips & Tutorials | Permalink