I recently redesigned my photography website, The Lens Flare. I had Internet Explorer 7 and Firefox 2 installed, and thus wrote the site to make it work with those browsers. Once I had it working on those 2 browsers, I tried it on IE6 and the template was horribly screwed up. Here, I’ll explain what I had to change to make it look good in the 2 current browsers and IE6.

Apparently, IE6 has a bug people have dubbed the double padding bug or double margin bug. The problem can usually be fixed by using the CSS option: “display:inline” on your DIVs that have the double spacing problem. This fixed most of the spacing issues, but it didn’t fix them all.

To fix the last spacing problem, I had to resort to an Internet Explorer Kludge called conditional comments to include a separate CSS file when IE6 is loaded.

To do this, you put the following code after your other CSS files in your HEAD tag:

<!--[if IE 6]><link rel=”style sheet” href=”ie6.css” type=”text/css” media=”all” /><![endif]-->

This loads the ie6.css file when somebody is using IE6.

The main CSS file has the following directions for the col2 div:

.col2 {
width:338px;
position:relative; float:left;
margin:0px 0px 0px 5px; padding:0px;
display:inline;
}

The ie6.css file overrides col2 with the following directives:

.col2 {
width:338px;
margin:0px; padding:0px;
display:inline;
}

In IE6, floating the div to the left and adding a margin on the left side messed things up. From what I can tell, it started the location of the div in a slightly different place than IE7 and Firefox does and therefore has to be positioned differently to appear in the same place on the screen.

Also, another trick I learned while dealing with IE6’s limitations was a handly CSS tidbit called: “overflow:hidden”.

There are several places in my layout where I have a 2 pixel tall div with a background color to act as a horizontal rule. For example, this gray line:

.gray-line {
position:relative;
width:99%;
height:2px;
background-color:#ddd;
margin:0px; padding:0px;
overflow:hidden;
}

However, without the overflow:hidden aspect, IE6 renders a line about 5-8 pixels tall.

Lastly, “background-repeat: no-repeat” solved one last IE6 problem. Since it seems to use different heights for things, in places where I’m using a background image, the image would start to repeat itself again for about 2-3 pixels. Setting this directive on those areas solved that problem. Combine that with overflow:hidden and we’re good to go.