Re: [CSS21] percentage values of 'top'

--- On Thu, 6/4/09, Anton Prowse <prowse@moonhenge.net> wrote:

> CSS21 doesn't seem to permit ignoring the top:-50%
> here.  Percentage values for 'top' refer to height of
> containing block, which, for static or relatively positioned
> elements, is formed by the content edge of the nearest
> block-level, table cell or inline-block ancestor box. 
> It seems to me that UAs should be able to know what the
> height of div.inner is (despite it depending upon the height
> of its child p) and be able to honour top:x% on the child
> p.
> 
> Am I misunderstanding the specified behaviour or
> underestimating the difficulty of implementing it?

Notice that the behaviour in IE7 varies even more: the inner paragraph is rendered right at the top of the outer div, although the inner div's top is halfway down the outer div.

Experimenting with other percentage values for top reveals that IE7 is calculating the top by applying the percentage against the outer div's top, then applying that relatively to the inner paragraph according to its normal flow position. So 50% on the inner div, and 50% on the paragraph total 100% and the inner paragraph appears exactly underneath the outer div. Likewise, the +50% and -50% cancel each other out, hence the behaviour here.

FF3.0 simply ignores the percentage value of top on the inner paragraph, no matter what its value. Absolute values behave as you'd expect them to.

Could this be a containing block issue? Is a relative box 'inside' another relative box contained within that relative box, or the closest statically-positioned ancestor?

- Bobby

Received on Friday, 5 June 2009 12:13:49 UTC