First Box

01 This is a test!

Second Box

02 This is a test!

Third Box

03 This is a test!

In the first box, the H1 has risen to the top of the box, as it should with the margin of 0px that IE gives it.

But the second and third boxes did not behave as expected. As we showed on the last page, the margins of the H1 headers should have bled through the edges of the un-bordered and un-padded DIV elements. If you load this page in Mozilla you will see the headers flush against the top of the DIV boxes, and a line of blank space above the three boxes where the margin bleeds through. In fact, the bottom margin of the P elements should be bleeding through the bottom of the DIV boxes also, as they do in Mozilla. This non-bleeding behavior is a bug in IE 5.x for Mac.

For now, I am at a loss trying to isolate the cause of this bug. As I showed on the previous page, most of the time IE will bleed margins correctly.

Regardless, the proposed solution still stands: explicitely declare margins when dealing with floats in IE 5.x for Mac.

Further reading: Escaping Margins.

contact micah@earthling.net