W3C home > Mailing lists > Public > www-style@w3.org > February 2008

Re: Overflow and Margins

From: Ben Cotterell <ben.cotterell@antplc.com>
Date: Sun, 3 Feb 2008 21:21:32 +0000
To: www-style@w3.org
Message-ID: <cc94d4466972fad55f4c2bb887df69def97c1d2c@localhost>

On Sun, Feb 03, 2008 at 12:09:10PM -0700, Alan Gresley wrote:
> 
> Brad Kemper wrote:
> 
> > On Feb 2, 2008, at 3:53 PM, Bruno Fassino wrote:
[...]
> |Whenever overflow occurs, the 'overflow' property specifies 
> |whether a box is clipped to its padding edge, and if so, 
> |whether a scrolling mechanism is provided to access any 
> |clipped out content.
> 
> There is no further mentioned on this page about the padding edge. So
> does the containing block established by the overflow box begin at it
> padding edge or content edge? I do think that this should be defined.

It is. See CSS 2.1 10.1-- the containing block is formed by the content
edge.

[...]
> All browsers seem to agree on the width of the overflow box and the
> width (padding edge) of the inner element regardless of if the
> overflow box has a width which is length or auto. I see this as
> correct. Only Gecko 1.8~1.9, Safari 3 (don't have a mac), Opera 9.5
> and IE7 will actually render overflow-x:scroll properly. Gecko 1.7,
> Opera 9.25 and IE6 render as of overflow-x was had a value of visible.

I think overflow-x may be in CSS3, but in CSS2.1 you've just got
overflow, which sets the same behaviour for both dimensions.

> Gecko 1.8~1.9, Safari 3 and Opera 9.5 will ignore the margin-right of
> the descendant element in the overflow box in most cases. There is a
> clear difference though if the overflow box has padding. Gecko 1.8
> will keep the padding-right of the overflow box where Safari 3 and
> Gecko 1.9 will either drop the padding-right of the overflow box or
> the margin-right of the descendant element has a negative value
> equaling the padding-right of the overflow box. Can anyone clarify
> this? Opera 9.5 shows no "over-constrained" condition and lengthen the
> scrollable box and on top that add a mysterious width.
> 
> One lot of test cases is for an overflow box with width of auto:
> 
> http://css-class.com/test/css/viseffects/overflow-auto-with-inner-box.htm
> 
> The equality values are arrived at when the overflow box is narrowed to 400px. The other lot of test cases is for an overflow box with width of length 400px:
> 
> http://css-class.com/test/css/viseffects/overflow-length-with-inner-box.htm
> 
> 
> Gecko 1.8 diverges from Gecko 1.9 and Safari 3 with the width of the
> scrollable box from example 3a in each test case. This is where
> padding is introduced on the overflow box. In  example 3c of each test
> case i am not sure if the end of the equality line (?) for Gecko 1.9
> and Safari 3 should be.
> 
> 'margin-right' 25px ~ 0px = 675px) + padding-right' 50px ~ 0px.
> 
> or
> 
> 'margin-right' 25px ~ -50px = 675px) + padding-right' 50px.
> 
> 
> In no part of 10.3.3 does it mentioned if padding-right is also
> ignored so all I can equate from this is that the last case stands
> true. So 'margin-right' for the descendant element is -50px. Where it
> says in 11.1 "whether a box is clipped to its padding edge" is this
> the type of case it referring to?

It's talking about the box on which you've set overflow: scroll. All it
means really is that the box's border is outside the bit that scrolls
around, but that its padding is inside it.

When scrolling is involved you've got two boxes-- a smaller "window"
onto a larger box behind. When you scroll you move the larger box
around. 

The size of the "window" is precisely defined. It's the padding edge of
the box that's being overflowed.

The size of the larger box is less precisely defined. You could use the
bounding box of the box's own padding edge and the outside margin edges
of its descendents. On the other hand, the spec just says, "a scrolling
mechanism to access any clipped out content". I'm not sure clipped-out
margins have to count as content.

> If so then shouldn't something be stated about "over-constrained"
> cases where the descendant box is clipped at the "padding right edge"
> for ltr text and the other edges at the content edge.

It should always be clipped to the padding edge. If it were clipped to
the content edge, the padding would stay put and you'd be scrolling
around the contents of the content area.
Received on Sunday, 3 February 2008 21:21:48 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Monday, 27 April 2009 13:55:01 GMT