CSS properties being passed up to the parent element when the DIV is empty

Question

This problem is happening for me on IE8 and Chrome which makes me think this is a standards thing.

I am creating a site with header and menu using DIVs that do not have

Answer 1

I just had this problem as well and added this to the css

border: 0px solid;

Answer 2

Try adding overflow: auto to the #header css code.

For example,

#header{
    width:600px;
    height:300px;
    background-color:red;
    overflow: auto;
}

EDIT: Seems like position: absolute works as well.

Answer 3

I think you're running in to margin collapsing.

See the CSS 2.1 spec on margin collapsing for more info.

Answer 4

Yes, it's a standards thing. It's called margin collapsing, and the reason that you don't see it in IE7 is most likely because IE7 gets it wrong.

Margins are a bit tricky as they don't specify an area around an element, but rather the minimum distance between elements. Margin collapsing happens when a child element has a margin and the parent element doesn't have padding or borders. The margin is applied between the child element and the surrounding elements, not between the child element and the parent element.

As some browsers (only IE that I know of) doesn't handle collapsing margins correctly, you should avoid them for now. Use padding instead if possible, or set a padding or a border on the parent to avoid the margins to collapse.