hasLayout.net

Affected Versions

This bug affects: IE8

Symptoms

Vertical margins appear to collapse upon a specific combination of vertical padding set in percentages as well as border or padding set on the parent's parent

Date of the Tutorial

Thu Aug 13 08:59:41 2009

Description

In this bug, the vertical margins appear to collapse upon a specific combination of vertical padding in percentages on the parent and border or padding (using any unit of measure) on the parent's parent. Let's glance at the demo:

Demo

Due to the nature of the bug, the demo is available on a separate page

HTML Code:

<div id="container">
    <div id="middle-man">
        <p>I has margins!</p>
    </div>
</div>

CSS Code:

#container {
    background: #f00;
    border: 3px solid #000;
}
#middle-man {
    background: #ddd;
    padding: 5% 0;
}
p {
    margin: 100px 0;
}

In sane browsers, there will not be any red color in the demo, since the padding property is applied to the ' element"><div> with gray background. In IE8, however, there will be red strips at the top and bottom - a sign the margins from the ' element"><p> are collapsing through onto the #middle-man ' element"><div>. The trigger for the bug is padding on #middle-man applied in the same direction as margins on the ' element"><p> element as well as border or padding set on #container

Solutions

Below are solutions for the above bug ordered by the solution type.

Solution (Clean Solution) - with Side Effects

Date of the Solution

Thu Aug 13 09:27:23 2009

Fixed Versions

All of the affected

Description

This solution is as simple as the other "Clean Solution" for this bug:

Due to the nature of the bug, fixed demo is available on a separate page

HTML Code:

<div id="container">
    <div id="middle-man">
        <p>I has margins!</p>
    </div>
</div>

CSS Code:

#container {
    background: #f00;
    border: 2px solid #000;
}
#middle-man {
    background: #ddd;
    padding: 5% 0;
    overflow: hidden;
}
p {
    margin: 100px 0;
}

All I did is add overflow property set to value hidden on the #middle-man - the element with percentage padding. Any overflow value other than visible can be used to fix the bug.

Side Effects

Solution (Clean Solution)

Date of the Solution

Thu Aug 13 09:18:08 2009

Fixed Versions

All of the affected

Description

The fix for the bug is quite trivial and for the most part does not have any real side effects.

Due to the nature of the bug, the demo is available on a separate page

HTML Code:

<div id="container">
    <div id="middle-man">
        <p>I has margins!</p>
    </div>
</div>

CSS Code:

#container {
    background: #f00;
    border: 3px solid #000;
}
#middle-man {
    background: #ddd;
    padding: 5% 0;
    border: 1px solid #ddd;
}
p {
    margin: 100px 0;
}

What I did here is apply a 1px top and bottom border on #middle-man (the ' element"><div> with percentage padding set on it) and set border-color to the same color as the background. Since the padding is in percentages anyway, in my opinion, having an extra pixel of it does not cause any issues.