As you can see there is a small difference between the handling of this page (more precisely, div#header) in various browsers. Actually, from all Windows browsers I have tested this in, only Internet Explorer does it the wrong way, how surprising...
The expected behavior is that the div#header has no top-margin, since that is only applied to the H1 element, not to the DIV. David Baron explains at bugzilla:
The following should clarify:
Two or more adjoining vertical margins of block boxes in the normal flow collapse.
If it has block-level children, the height is the distance between the top border-edge of the topmost block-level child box and the bottom border-edge of the bottommost block-level child box. However, if the element has a non-zero top padding and/or top border, then the content starts at the top margin edge of the topmost child. (The first case expresses the fact that the top and bottom margins of the element collapse with those of the topmost and bottommost children, while in the second case the presence of the padding/border prevents the top margins from collapsing.) Similarly, if the element has a non-zero bottom padding and/or bottom border, then the content ends at the bottom margin edge of the bottommost child.
This is a problem, since lots of new web authors are making web pages in Internet Explorer and are only testing pages in that browser, until they visit a forum or post a message on a news group. After that, they are testing it also in Mozilla, Opera, Safari and perhaps some older Netscape versions and are noticing, that it doesn't work as expected. When I first discovered this, it didn't made sense to me either, but now I know how to 'work around' the problem I have never had a problem with it again.
The solution to this problem can be found here: margin-top solution. Quote locations: