Stylesheets - Background and non-auto-width questions

Author

Background and non-auto-width questions

Gérard Talbot

2006-11-05, 11:33 pm

Hello,

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<title></title>
<style type="text/css">
body {background-color: white; color: black;}
#parent_block {background-color: red; width: 100%;}
#nested_child_block {margin: 150px 0px; background-color: green; color:
white;}
</style>
</head>
<body>
<div id="parent_block"><p id="nested_child_block">foo</p></div>

2 questions regarding the above code.

1- Why Firefox 2 and Opera 9 do not render large red area above and
below the green child block? ... like MSIE 7 does

2- If I remove width: 100%, then MSIE 7 does not show the large red area
above and below the green child block. Why is that?

What am I missing?

Thank you

Gérard
--
remove blah to email me

2006-11-05, 11:33 pm

"Gérard Talbot" <newsblahgroup@gtalbot.org> wrote in message
news:12kb3s12vkeej56@corp.supernews.com...
> Hello,
>
> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
> "http://www.w3.org/TR/html4/strict.dtd">
> <title></title>
> <style type="text/css">
> body {background-color: white; color: black;}
> #parent_block {background-color: red; width: 100%;}
> #nested_child_block {margin: 150px 0px; background-color: green; color:
> white;}
> </style>
> </head>
> <body>
> <div id="parent_block"><p id="nested_child_block">foo</p></div>
>
> 2 questions regarding the above code.
>
> 1- Why Firefox 2 and Opera 9 do not render large red area above and
> below the green child block? ... like MSIE 7 does
>
> 2- If I remove width: 100%, then MSIE 7 does not show the large red area
> above and below the green child block. Why is that?
>
> What am I missing?
>
> Thank you
>
> Gérard

See "8.3.1 Collapsing margins" in the w3.org css2 specs

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

"In this specification, the expression collapsing margins means that
adjoining margins (no non-empty content, padding or border areas or
clearance separate them) of two or more boxes (which may be next to one
another or nested) combine to form a single margin."

A better explanation:

http://www.complexspiral.com/public...apsing-margins/

Rich

Ben C

2006-11-05, 11:33 pm

On 2006-10-30, Gérard Talbot <newsblahgroup@gtalbot.org> wrote:
> Hello,
>
><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
> "http://www.w3.org/TR/html4/strict.dtd">
><title></title>
><style type="text/css">
> body {background-color: white; color: black;}
> #parent_block {background-color: red; width: 100%;}
> #nested_child_block {margin: 150px 0px; background-color: green; color:
> white;}
></style>
></head>
><body>
><div id="parent_block"><p id="nested_child_block">foo</p></div>
>
> 2 questions regarding the above code.
>
> 1- Why Firefox 2 and Opera 9 do not render large red area above and
> below the green child block? ... like MSIE 7 does

This is because the child block's top and bottom margins should collapse
with those of the parent block, as rh said. MSIE 7 is failing to do
this.

> 2- If I remove width: 100%, then MSIE 7 does not show the large red area
> above and below the green child block. Why is that?

The width: 100% is, according to the CSS specification, meaningless
here. The parent block's computed width should be 100% the width of its
container (in this case the viewport) anyway. So I think you're looking
at another MSIE 7 bug or non-conformance.