IE7-/Win hasLayout and Margins

Currently under review and testing 12th May 2008. IE8 passes test 2a, 2b & 2d.

These tests demonstrate the effects of hasLayout on default margins for block level elements. They confirm similar tests done by Bruno Fassino, IE/Win: Margin collapsing and hasLayout using just divs. The test in this test series uses the div as a control for testing the default margins of block level elements.

The most common bug with hasLayout and default margins is when a container element has hasLayout=true. This causes the vertical margins of descendant elements that sit against the containers' edge to disappear.

Each example consists of:

1. Two empty divs with grey backgrounds purposely with no margins.
2. Between the two empty divs is a container (containing block) with a transparent grid background with lines spaced every 10 pixels. There is horizontal padding for each container to show the grid background. The containers with hasLayout show a transparent grid on yellow background.
3. A descendant block element either being a paragraph, h3 heading, unordered list or div. The paragraphs, headings, unordered list have their default vertical margins. This has been established to be 19 pixels in height and is not changed upon text resizing. The divs have vertical margins of 19px pixels.

Further test cases with hasLayout and margins are linked to at the bottom of the page.

Elements with default vertical margins inside containers

With example 1a, 1b, 1c & 1d, IE shows somewhat correct behavior. The vertical margins of these descendant block elements, stick out beyond their containers, thus pushing the container down from the grey div by 19 pixels and pushing the bottom grey div away from the container by 19 pixels.

Elements with default vertical margins inside hasLayout containers

With all example IE shows wrong behavior. The container has hasLayout and this causes the paragraphs' top and bottom margin and the headings' and unordered lists' top margin to disappear. The divs' vertical margins and headings' and unordered lists' bottom margin do not collapse into the adjoining vertical margins of the container and stick out beyond the container, but are contained by the containers' content edge. This should only happen if the container has padding or a border.

Elements with vertical margins of 'auto' inside containers

With example 1a & 1b, IE shows wrong behavior. The vertical margins set to 'auto' of these descendant elements, stick out beyond their container, thus pushing the container down from the grey div by 20 pixels and pushing the bottom grey div away from the container by 20 pixels.

With example 1c & 1d, IE shows correct behavior. The vertical margins of 'auto' resolve to '0'.

Elements with vertical margins of 'auto' inside hasLayout containers

With example 2a & 2b, IE shows wrong behavior. The container has hasLayout and this causes the paragraphs' and headings' vertical margins of 'auto' not to resolve to '0' and are contained by the containers' content/padding edge.

With example 2c & 2d, IE shows correct behavior. The vertical margins of 'auto' resolve to '0'.

The above demonstrations shows only the most simple form of this bug but future test cases will explore this bug in different situations involving containers with padding.

• The original test with default vertical margins.
• The original test with floated elements with default vertical margins.
• Test case by Bruno Fassino - IE7-/Win: Default vertical margin on paragraphs

Created: 7th of May, 2008. Updated: 8th of May 2008

• Internet Explorer Bugs
• CSS Class tests