W3C home > Mailing lists > Public > www-style@w3.org > March 2011

Re: [CSS21] top margin edge - hence static position - is not well-defined

From: Alan Gresley <alan@css-class.com>
Date: Mon, 28 Mar 2011 02:32:55 +1100
Message-ID: <4D8F58A7.8040508@css-class.com>
To: Anton Prowse <prowse@moonhenge.net>
CC: "www-style@w3.org" <www-style@w3.org>
On 28/03/2011 12:31 AM, Anton Prowse wrote:
> 10.6.4 concerning the height of absolutely positioned elements says:
> # [...] the static position for 'top' is the distance from the top
> # edge of the containing block to the top margin edge of [...]
> But the vertical margin edges are not well-defined for elements whose
> margins participate in margin collapsing. This is most noticeable for
> self-collapsing elements, such as in the following test case in which
> there is no sensible relationship between the border box position of the
> "tricky" element (as determined by 8.3.1) and its 20px bottom margin:
> <div style="border-bottom:1px solid"></div>
> <div id="tricky" style="margin-bottom:20px">
> <div style="margin-top:10px"></div>
> </div>
> <div style="border-top:1px solid"></div>
> For the most part this glitch doesn't cause us any problem since the
> spec avoids (albeit probably unconsciously) identifying individual
> margin pieces from amongst a collapsed margin lump. However, 10.6.4
> relies on identifying the top margin edge of a box which may very well
> participate in margin collapsing.
> What should we do to fix this? Where should the absolutely positioned
> element be drawn in the following test case, and why?
> <div style="border-bottom:1px solid; margin-bottom:20px"></div>
> <div style="position:absolute; width:100px; height:100px; background:
> yellow; margin-top:10px"></div>
> <div style="border-top:1px solid; margin-top:20px"></div>
> There's no interop on this issue, but that's because Fx and IE don't
> perform tentative margin collapsing at all for abspos in order to
> determine their static position.

This is since the margins of elements with position absolute do not 
collapse [1] 8.3.1.

   | Margins of absolutely positioned boxes do not collapse
   | (not even with their in-flow children).

See this test case.


1. <http://www.w3.org/TR/CSS21/box.html#collapsing-margins>

The lower box is not even needed to demonstrate but I have included 
example 2 which is the same as what you have above. If IE9 and FF did 
collapse these margins, then it would break 8.3.1.

Alan http://css-class.com/

Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo
Received on Sunday, 27 March 2011 15:33:31 UTC

This archive was generated by hypermail 2.3.1 : Monday, 2 May 2016 14:38:44 UTC