Recently I had to work on a layout that had a lot of javascript in it, and because the structure of the html couldn’t change, I positioned things absolutely and relatively ( position: absolute; position: relative;) in order to get things in the right place. I was very pleased with the results and Firefox and IE7 looked exactly the same. Then came IE6. It was slightly off when I first loaded it in, so I did the typical thing and just did some conditional code for ie 6. Then, the next time I refreshed, things moved into random other places. And then again on the next refresh. And then not on the next refresh. And so on. How did I fix it? On today, the 7th birthday of IE6, when others are working hard to put ie6 on its death march, here’s a bit of code that made my life a little brighter…

Here’s my pig, sitting pretty in its box. Isn’t he sweet? Now look what happens when in IE6.

Gorgeous, isn’t it? Okay, now that you’ve felt my pain, here’s the solution….

The reason it didn’t work was because the box that surrounded the whole area, which I defined as “position: relative” didn’t have a “haslayout” property. Things that have layouts are things like boxes and whatnot, and for some reason ie6 has some random problems with this and randomly renders things differently. To fix it, you have to force it to have a layout. There are a number of ways to give something a layout, but this is the one I used:

*html .className{

height: 0;

he\ight: auto;

zoom: 1;

}

Apparently this is what you need to do to get it to have some layout. (Yes, that backslash is there on purpose–it’s not a typo. Not sure why, but it fixed my problem, so let’s not fuss…make sure you put it in!). My work doesn’t have a separate style sheet for ie (don’t even get me started on that decision!) so in my main css file, I add *html and a space in front of the class name. This makes the class invisible to everything but ie6.

Hopefully hacks like this will die with IE6, but until then, give yourself some layout, and save yourself a lot of hassle!

N.B. there is no need to apply this to every element in your layout. In my case, it only needed to be applied to my outer container that I made that only had the position:relative class on it and no other height elements.