CSS

IE7 bug 2: not defaulting left on abs. positioned elements to 0

I’m not even sure this is a bug. IE5/Mac, IE6 and IE7 does it one way, Firefox, Opera, Safari another. Past experience on such things tells me this is a bug in IE, but it could also be that CSS spec is not specific enough on this issue and that browser makers chose different paths.

Anw, to the issue. Imagine floated element followed by an element which is absolutelly positioned (AP) and have this style applied:



display:block;

position:absolute;

top: 0;

width: 30em;

You see, no left rule. IE will position the left edge of the AP at the point where right edge of the floated element is:

IE rendering of the test case

Opera/Gecko/KHTML will place it at the left:0 of the content area of the parent (which is what I would expect it to do):

Firefox/Safari/Opera rendering of the test case

Applying clear:both to the AP element has no effect, things stays the same. I have seen this behavior in IE6 several times, but I keep forgetting it and it hunts me again along the way, when I least need it. This way, I will probably remember it. I hope some of you might find this useful too.