Re: top: 50%; position: relative; question

Gérard Talbot <newsblahgroup (AT) gtalbot (DOT) org> wrote:

When trying this page

http://www.gtalbot.org/BrowserBugsSe...sitioning.html

I get different rendered layouts with IE 6, IE 7 beta 2, Firefox 1.5.0.2
and Opera 9.0 build 8367.

Firefox 1.5 and Opera 9 will just ignore the CSS declaration
top: 50%; position: relative;

They don't.

IE 6 and IE 7 beta 2 position the red div at 50% of the height of the
body node.

What height? (you haven't specified one)

After carefully reading the CSS 2.1 spec, I wonder (am not sure)

- which browsers is right, which browser is wrong
- and why (in terms of the CSS 2.1 spec)

What do you think?

The basic 'Where Opera and Gecko agree and where IE renders differently,
IE is wrong' rule is as valid today as it ever was. IE '7' is still
years behind Opera and Gecko with regard to CSS compliance and feature
support.

A relatively positioned box is initially laid out as per normal flow,
and then offset as per it's box offset values.
http://www.w3.org/TR/CSS21/visuren.h...ve-positioning

Percentage values for the 'top' property are relative to the containing
block.
http://www.w3.org/TR/CSS21/visuren.html#position-props
http://www.w3.org/TR/CSS21/visuren.h...ntaining-block

In this case the containing block is the initial containing block
http://www.w3.org/TR/CSS21/visudet.html

In this case the containing block has no specified height, thus the
computed height resolves to 'auto'.
http://www.w3.org/TR/CSS21/visudet.h...eight-property

--
Spartanicus