Web Page Templates Icons, Clipart, Logos


Hot Topics

Post Archive


Aug 04, 2009 12:20 AM EDT

Making CSS layouts work in the 3 main browsers: IE6, IE7, and Firefox 2

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 {
position:relative; float:left;
margin:0px 0px 0px 5px; padding:0px;

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

.col2 {
margin:0px; padding:0px;

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 {
margin:0px; padding:0px;

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.

Darren css | browsers | web site format

Making CSS layouts work in the 3 main browsers: IE6, IE7, and Firefox 2

Your Name:
Your Comment:
Please enter the text from the image in the box below:





Resource Links