Stretching position:absolute boxes

In the belove test cases there are red boxes with position:relative (and hasLayout) containing orange ones with position:absolute.

1. In the first case, the a.p. box has top:0 and bottom:0 (left:200px, not relevant). Its height should be equal to the height of the relative container. This does not work in IE6-/Win (and IE7+ quirks mode), IE5/Mac: height is determined by the content; bottom:0 is not respected. It doesn't work in Opera 8: height is NOT determined by the content, but less than the container's height, bottom:0 is not respected. It works in IE7+ standards mode, Opera 9, Gecko, Safari.
2. In the second case, the a.p. box has left:0 and right:0 (top:1em, not relevant). Its width should be equal to the width of the relative container. This does not work in IE6-/Win (and IE7+ quirks mode), IE5/Mac: width is determined by the content which is shrink-wrapped; right:0 is not respected. It works in IE7+ standards mode, Opera, Gecko, Safari.
3. In the third case, the a.p. box has height:100% (left:200px; top:0, not relevant). Its height should be equal to the height of the relative container (even if the height of the latter is auto!) This does not work in IE6/Win standards mode, IE5/Mac and Opera 8 (height is determined by the content). It works in IE5/Win, IE6 quirks mode, IE7+, Opera 9, Safari, Gecko.

The three test cases are repeated below, without hasLayout on the relative container. No variations in IE6-7/Win standards mode. In IE/Win quirks mode (including IE5) there is no more stretching in any case.

This page in quirks mode: Stretching position:absolute boxes - Quirks

CSS tests home