IE7-/Win hasLayout and Margins

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

These tests confirm similar tests by Bruno Fassino, IE/Win: Margin collapsing and hasLayout using just divs. The test below uses the div as a control for testing the default vertical margins of paragraphs and headings and the effect of hasLayout on these margins.

These test show only singular instance of an element inside a container. The adverse effects when a container element has haslasyout only affects the margins of descendant elements that sit against (adjoining margins) the containers' containing block edge or padding edge if there is padding. Simply put, the top margin of the first child and the bottom margin of the last child of the parent container are the only margins affected.

Need to add default veritical margins of 19px.

Each example consists of:

1. Two empty divs with a grey background. Each is 5 pixels in height and purposely has no margins.
2. Between the two empty divs is a container (containing block) with a transparent grid background with lines spaced every 10 pixels. Each container has a left and right padding of 40 pixels. The first set of test have no top and bottom padding, the second set have a top and bottom padding of 10 pixels.
3. An inner element (descendant block), either being a paragraph, h3 heading, unordered list or div. The paragraphs, headings, unordered list have their default vertical margins. The divs have vertical margins of 20px pixels. Each paragraph, h3 heading, unordered list or div has a left and right margin of 60 pixels.

Elements with margins inside containers

With example 1a, 1b & 1d, IE shows correct behavior. The vertical margins 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.

Elements with margins inside hasLayout containers

IE shows wrong behavior for the next three examples. The container has hasLayout and this causes the paragraphs' top and bottom margin and the headings' top margin to disappear (wrong). The divs' vertical margins and headings' 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/padding edge (wrong). This should only happen if the container has padding or a border.

Elements with margins inside containers with padding

With example 3a, 3b & 3d, IE shows (correct) behavior. The vertical margins of these descendant elements are contained by the containers' content edge because each container has vertical padding of 10 pixels.

Elements with margins inside hasLayout containers with padding

IE shows wrong behavior for the next three examples. The container has hasLayout and this appears to cause the paragraphs' default top and bottom margins and the headings' default top margin to just disappear (wrong). The divs' and headings' bottom margin does not collapse and are contained by the containers' padding edge (correct).

In Example 4d, the top padding of the container seems to have disappeared (wrong). The containers' top padding is only noticeable when it is greater than the top margin of the descendant div and only the part of it's width that is more than the top margin of the div is shown. So padding of 30 pixels and margin of 20 pixels will show only 30 pixels.

HasLayout Elements with margins inside containers with padding

IE shows wrong behavior for the next three examples. The descendant elements have hasLayout and this appears to cause the paragraph and headings' default top margins and the divs' top margin to just disappear (wrong). The descendant elements bottom margin is not contained by the containers' padding edge (wrong) and strangely sticks out beyond the container. Also the horizontal margins of the descendant elements have disappeared (wrong).

• The same test repeated but with vertical margins of 'auto'.
• The same test repeated but with default vertical margins .

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

• Margins
• CSS Class tests