- From: Aryeh Gregor <Simetrical+w3c@gmail.com>
- Date: Thu, 4 Jun 2009 14:04:24 -0400
- To: Anton Prowse <prowse@moonhenge.net>
- Cc: "www-style@w3.org" <www-style@w3.org>
On Thu, Jun 4, 2009 at 10:22 AM, Anton Prowse<prowse@moonhenge.net> wrote:
> <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.
This is also true on Chromium 3.0.184.0 (0) on Linux (nightly PPA
build, should be quite recent WebKit). The same happens if bottom:
50% is given. I can't figure out why either.
Received on Thursday, 4 June 2009 18:05:12 UTC