The Blog

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:

CSS:
  1. display:block;
  2. position:absolute;
  3. top: 0;
  4. 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.

Banca

Banca

Beautiful and functional currency converter, supports just about any currency in the world.

Go Couch to 5k

Go Couch to 5k

The most popular starter running program in beautiful feature-rich app (GPS tracking, charts, detailed history etc)

Quickie to do

Quickie to do

The fastest short-term task-list / check-list app on the App Store. Really.

Guerrilla Cardio

Guerrilla Cardio

The most challenging high-impulse interval training in the world.

Run Mate

Run Mate

A versatile running coach app, with unlimited number of running programs. Perfect for casual runners.

Comments are closed.