Unwanted gap in IE5/Mac Fixed.

IE5/Mac displayed an unwanted (aprox 40px) gap above this <div> until I added p.banner {margin:0}.

Responding to the cry for help in my first posting to the CSS-discuss list, Philippe Wittenbergh wrote:

Apparently, when you specify a height on the #Header <div>, the (default) margin-bottom on the p.banner is leaking out of the div. Specifying margin:0 instead of margin-top:0 on the p.banner seems to solve the problem.

Philippe describes this bug more fully at the bottom of this page: http://www.l-c-n.com/IE5tests/misc/index.shtml

Unexpected gap between two <div>'s.

When a block level element <div> has a {height:xx} set, IE5 mac will leave a gap between this <div> and the next one, even though both <div>'s have the adjoining margins set to 0. This happens when the contents block inside the first <div>, ie a paragraph or a header, has no setting or a setting other than 0 for {margin-bottom} specified. The bottom margin of this contents block leaks out of the container block: sample. This can be fixed by setting {margin-bottom:0} on the contents block: sample2. Another fix: don't set height on the first <div>.

The OReilly Web Development Devcenter site also notes this bug, calling it "Reverse inheritance of margin-bottom" http://www.oreillynet.com/pub/a/javascript/synd/2002/11/15/css_pitfalls.html?page=3#reverse

Yet Another Fix (as used on the main section of this site)

I needed a {height:100%} on <div#content> just to make IE5 Win behave, so I hid that declaration from IE5 Mac using the commented backslash hack.