It's time for: Yet Another IE CSS Bug

The IE Disappearing Margins Bug

Collect 'em all! Share 'em with your enemies friends!

I don't think this bug is one of the ones documented by Big John and Holly as of 4/26/2004.

Here are the basic rules to display this bug:

You need a box inside another box. The outer box (gray in the examples below) must have:
1. No dimensions (height, width) defined.
2. No content of any kind before the start of the inner box. This includes no hidden content and no comments.
The inner box (red&white in the examples) must have:
1. at least one margin -- in the examples, both margin-top and margin-left are set at 50px.
2. at least one dimension (height, width) defined. I have used width=60% in the examples.

Some test cases:

The "standard" or original case, in which a div is inside a div. In IE6.0, both the top and left margins disappear. In IE5.0, only the top margin disappears.

Here the inner div has padding, not a margin. The padding does not disappear.

Here the inner block element is a heading with class="margin", just as in the inner divs above. As with divs in IE5.0, only the top margin disappears.

Here the inner block element is an unordered list:

as with the heading, only the top margin disappears
but wait! that's not all!
the bullets for the list also disappear -- but just in IE6.0, IE5.0 still has them --
and if it's a numbered list, the numbers disappear.
Are we having fun yet?

This is a single-cell table. As with the heading and the list, only the top margin disappears.

Getting rid of the bug is simplicity itself

just specify a dimension (height, width) on the outer box. You probably do this anyway, which is why no-one seems to have noticed this enough to document it before.

But there's also

putting on the old Godzilla suit and heading for Redmond.

posted by Mary Ellen, Doctor Science, 11:27 AM 4/28/2004; updated 11:54 AM 4/28/2004