Re: Non-transparent Body Margins

2009/4/14 Michael Jansson <mjan@em2-solutions.com>:
> I believe I have read comments about this but I can't find any references
> after going through the CSS 2.1 spec. Would appreciate any insight into this
> question. If you remember an old mail-thread, then just point me in the
> right direction (I must be searching with the wrong keywords since I'm not
> finding anything on this topic).
>
> If I look at this code in a modern browser...
>
> <!DOCTYPE html PUBLIC '-//W3C//DTD HTML 4.01//EN'>
> <html>
> <body style='border:1px solid red; background-color:#fee; margin:10px;
> padding:0px'>
> Some text
> </body>
> </html>
>
> ...I'm getting a page with colored margin. I believe the spec is pretty
> clear that margins are transparent, thus letter the background of the
> containing block to show though. However, I think I have read somewhere that
> there is an exception for the body/root element. It's background property
> would not only be applied to the content and padding region like it would
> for other elements, but it would also cover its margins. Is this correct?
> Are there other exceptions like this? (Don't think the spec is very clear).

Section 14.2: "The background of the root element becomes the
background of the canvas and covers the entire canvas, anchored (for
'background-position') at the same point as it would be if it was
painted only for the root element itself. The root element does not
paint this background again.

For HTML documents, however, we recommend that authors specify the
background for the BODY element rather than the HTML element. For HTML
documents whose root HTML element has computed values of 'transparent'
for 'background-color' and 'none' for 'background-image', user agents
must instead use the computed value of those properties from that HTML
element's first BODY element child when painting backgrounds for the
canvas, and must not paint a background for that BODY element. Such
backgrounds must also be anchored at the same point as they would be
if they were painted only for the root element. This does not apply to
XHTML documents."

The same rule is for "overflow". It has been proposed to extend this
to <body> in XML, in the XHTML namespace, but the feature is at-risk.

> Anyhow, this is what I believe I have read somewhere, but I can find any
> references to this. If this is not the case, then what is it that I am
> missing here? Why is the margin region pink with the code above?

Because the background of HTML body is treatead as the background of
the canvas. So not only it covers margins, but it covers also the part
of the canvas after the end of content.

> A second question would be why there is such a difference between the result
> in browsers when the DTD is removed from the code above? The margin is
> collapsed in IE, the height is expanded in both IE and Safari, and FireFox
> and Opera remains unchanged.

You experienced "quirks mode": a different, non conforming layout mode
that UAs keep for backward-compatibility and it is triggered by "old"
DTDs.

> Thanks,
> Em2 Solutions AB
> Michael Jansson
>

Giovanni

Received on Tuesday, 14 April 2009 14:37:44 UTC