IE6 and 7 Absolute Positioning Bug

Question

After testing a small site that I built for my school in Firefox, SeaMonkey, Chrome, Opera, Safari, Camino and IE8 I found that my site's absolutely positioned divs were all pretty consistant.

However, when I began testing the site in IE6 and 7 all of the divs are out of place and messy across the page.

I have spent two weeks of Googling and trying to figure out what the problem is, however I still cannot find a consistent way to fix this problem.

Hopefully I have been clear enough, sorry if my English is not very good, it is my third language.

If you need any more clarification please feel free to ask.

Any and all help is appreciated.

Thank you for your time.

Note: As said above, I am aware that there are numerous solutions and similar questions, however, I have not been able to find one that works in this situation.

UPDATE: Zoom property fixed most of the issues I have been having, hasLayout seems to be a mighty pain. Thanks Spudly and Patrik

Answer 1

This sounds like the classic "HasLayout" bug, which is one of the banes in the life of every web developer that has to support older versions of IE.

HasLayout is an internal flag that IE hold against each element which determines whether to display it normally or with bizarre glitches. Actually that's not what it's really there for, but it does seem to have that effect.

The way to solve the problem is to force the elements in question to gain the HasLayout flag. Sadly, IE doesn't provide a direct way to do this; you have to apply a style which triggers it.

Typically, the style people choose to apply for this is

.myelelement {
    zoom:1;
}

The reasons for this are firstly that zoom is an IE-specific stylesheet attribute, and so this doesn't affect any other browsers, and secondly because zoom:1; is the default value, so you're not actually changing anything about the element. Despite this, it still triggers the element to gain the HasLayout flag, and thus should solve your problems.

Hope that helps.