IE7 Calculated Offset Bug

Note: This page is rather new and has stuff repeated all over the place. Most of the text and code relates to the Recalculated Offset bug but each example is analyzing the Calculated Offset bug. So look at the examples and not the relating text.

Absolutly postioned elements in following stactic boxes in the source

Setup:

Static Box

1. a.p.

What we have above is a Container element containing an absolutely positioned element. The code will look like this.

Static Box

2. a.p. - left: auto;

What we have above is a container element containing an absolutely positioned element. The code will look like this.

Static Box

3. a.p. - left: 0;

What we have above is a container element containing an absolutely positioned element. The code will look like this.

Static Box

4. a.p. - top: auto;

What we have above is a container element containing an absolutely positioned element. The code will look like this.

Static Box

5. a.p. - top: 0;

Absolutly postioned elements in following floated boxes in the source

Setup:

Floated Box

6. a.p.

Failed: IE 8 (wrong left offset)

Floated Box

7. a.p. - left: auto;

Failed: IE 8 (wrong left offset)

Floated Box

7. a.p. - left: 0;

What we have above is a container element containing an absolutely positioned element. The code will look like this.

Floated Box

9. a.p. - top: auto;

Failed: IE 8 (wrong left offset)

Floated Box

10. a.p. - top: 0;

Failed: IE 8 (wrong left offset)


<div class="container">Container
	<div class="absolute">Absolutely Positioned Element</div>
</div>

In the below examples, the absolutely positioned element is hidden from view by the normal position value and brought back into view by the hover position value. The first two examples do not work in IE7.