IE7- and Opera 9.10~11.11 absolute positioning with block elements not aligning

Testing 23th Feb 2010. Upadated 2nd June 2011. This is a reworking of a test case which affected IE7 and Opera 9.00~9.25 since it's the same bug concerning non collapsing vertical margins. Needs to be reduced.

These tests show a scenario when the first element in a container is absolutely positioned and is followed in the source by a static block element with a top margin. What should happen is margins should collapse. These tests demonstrate that this doesn't not always happen in IE7 or Opera 10.

With example 1a, IE7 and Opera 9.10~11.11 shows correct behavior. The top margins of these descendant elements collapses and stick out beyond the container, thus pushing the container down from the grey div by 20 pixels and pushing the bottom grey div away from the container by 20 pixels.

1a. Paragraph (with default vertical margins)

With example 2a and 2b IE7 shows wrong behavior. The paragraphs' and divs' top margin does not collapse into the adjoining vertical margin of the container and stick out beyond the container, but are contained by the containers' content/padding edge due the presence of an absolutely positioned box before it in the source. This should only happen if the container has padding or a border.

With example 2a and 2b Opera 9.24~11.11 shows wrong behavior. The paragraphs' and divs' top margin do collapse into the adjoining vertical margin of the container and stick out beyond the container, but the absolutely positioned boxes' top edge is situated at the margin edge of the container instead of it's content edge. This would only happen if there was no container enclosing the absolutely positioned box and the paragraph or div for margin collapse to happen.

ap left

2a. Paragraph

Space
ap left
2b. Div

Passed: Gecko 1.7~1.9, IE8 and Safari 4

Failed: Opera 9.10~11.11 and IE5.5~IE7

Example 3a and 3b, IE7 and Opera 9.10~11.11 shows correct behavior. The paragraphs' and divs' top margin collapses into the adjoining vertical margin of the container. This is because the container itself also has top margin.

ap left

3a. Paragraph (wrapper with top margin)

Space
ap left
3b. Div (wrapper with top margin)

IE7 and hasLayout and Opera auto offset for top

Similar to the above examples (2a and 2b), example 4a and 4b, IE7 shows wrong behavior. In the first example the paragraphs' top margin has disappeared due to the container having hasLayout. In the second example the divs' top and bottom margin does not collapse into the adjoining vertical margin of the container and stick out beyond the container, but are contained by the containers' content/padding edge.

With example 4a and 4b, Opera 9.24~11.11 shows wrong behavior. The paragraphs' and divs' top margin do collapse into the adjoining vertical margin of the container and stick out beyond the container, but the absolutely positioned boxes' top edge is situated at the margin edge of the container instead of it's content edge. This would only happen if there was no container enclosing the absolutely positioned box and the paragraph or div for margin collapse to happen.

ap left

4a. Paragraph (wrapper with hasLayout)

Space
ap left
4b. Div (wrapper with hasLayout)

But if the container has hasLayout then both examples 5a and 5b will show wrong behavior.

ap left

5a. Paragraph (wrapper with top margin and hasLayout)

Space
ap left
5b. Div (wrapper with top margin and hasLayout)

Please see IE7 hasLayout and Margins for more information about why the paragraphs' and divs' react differently in hasLayout containers.

Please see IE7 hasLayout and Margins for more information about why the paragraphs' and divs' react differently in hasLayout containers.

Please see Opera calculated auto top offset bug for more information about how this browser handles auto offsets wrongs.

CSS2.1 - 8.3.1 Collapsing margins "Margins of absolutely positioned boxes do not collapse (not even with their in-flow children)."