Sent by Scott Sauyet on 20 June 2002 10:10
> In my tests, that has the unfortunate effect of negating the
> background color of a div which contains p elements, but in
> different ways among (Win2K) IE6, Opera6, and Netscape6. The
> following displays a live example followed by 3 screen shots:
>
> http://www.typeandimage.com/css/margins2.html
This definitely is a case of collapsing margins. If you add this to
your code:
#topMenu p, #footer p {
margin: 0;
}
you still get the inconsistent (and unwanted) behavior. There is
white space between your #topMenu div and your #content div with its
background color, even though the #content div has no margin of its
own. This happens in Moz and Opera but not in IE. The top margin for
the first paragraph in #content is collapsing with the (0-height) top
margin of #content, and being styled as the margin for #content.
You can see that this is so by now adding a one pixel border or
padding to your #content div. This separates the two margins, which
can no longer collapse, and the white space disappears.
There is still an inconsistency in IE, which I'm sure could be
overcome with the right hackery.
You can also get rid of the white space without adding padding or
border by using "#content p:first-child" and "#content p:last-child",
but of course you still will have to do something different for IE.
-- Scott
