Sent by Adam Kuehn on 11 November 2003 15:03
At 6:56 PM -0500 11/10/03, Shaun Inman wrote:
> >> Anyone know why margin-top
>>> extends outside of the containing element in modern browsers?
>>
>> Strangely enough, yes!
>
>Thanks for the link MikeL, I'm familiar with collapsing margins, it just
>seems odd that in this case it isn't really collapsing the margin but
>instead extending it outside of the block level container. Border or no
>border I would expect a margin to stay inside the containing element.
What you are seeing isn't the margin extending outside its containing
element. In fact, you'll notice that the spacing across browsers is
identical and correct. Instead, you are simply seeing a difference
of opinion as to which background to apply.
In this case, the two margins collapsing are the top margin of the
#content div, and the top (default) margin of the header. Remember,
a margin is outside the content area of a block-level element, so
what should show through a margin in general is the container of the
element. However, a careful reading of the spec shows that the W3C
has not specified which background should show through a collapsed
margin. IE chose to show the background which would ordinarily appear
behind a margin applied to the inner element, the header (i.e., it
shows the background color on the #content div). Mozilla and Safari
chose to show the background which would ordinarily appear behind a
margin applied to the outer element, the #content div (i.e. they show
the background on body). Either choice is technically correct,
although personally I find that IE makes more intuitive sense in this
case.
An easy solution here is to apply a one pixel border-top to the
header in the same color as the background of the #content div. This
will cause the margins to stop collapsing, #content will get the zero
margin-top you specified, and all browsers will apply the #content
background to the margined area. Since the border and margin are the
same color, you'll get the seamless appearance you are after.
HTH,
--
-Adam Kuehn
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/