[CSS21] percentage values of 'top'

It seems to be part of CSS folklore that the following code

<div class="outer">
 <div class="inner">
  <p>This is some text</p>
 </div>
</div>

.outer {
 width: 200px;
 height: 300px;
}
.inner {
 position: relative;
 top: 50%
}
.inner p {
 margin: 0;
 position: relative;
 top: -50%;
}

results in the appearance of "vertical centering" of the p within 
div.outer in IE6 but fails to do so in other browsers.

Despite it being seemingly regarded as a bug, the IE6 behaviour looks 
correct to me: the top of div.inner is half-way down div.outer, and the 
top of div.inner p is pulled up by half the height of div.inner.

However, in Fx3.5b4 and Op10b1, whilst the position:relative; top:50%; 
on div.inner is obeyed, the top:-50%; on the child p is ignored.

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?

Cheers,
Anton Prowse
http://dev.moonhenge.net

Received on Thursday, 4 June 2009 14:23:40 UTC