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 <div> with gray background. In IE8, however, there will be red strips at the top and bottom - a sign the margins from the <p> are collapsing through onto the #middle-man <div>. The trigger for the bug is padding on #middle-man applied in the same direction as margins on the <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

The side effect of this solution may be the fact that you want overflow to be visible - nothing major. Also, note, that if you're using the height trick for the IE6 min-height workaround, you could set overflow for IE8-only or use the other "Clean Solution" for this bug that involves setting a tiny border.

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 <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.

Comments

• Zoffix Znet

  Mon Aug 17 17:44:16 2009

  Oh, now I see your point. I'll keep that in mind for later demos and I'll fix the existing ones when I'll implement a "demo showing" thing I have in mind.
  
  Thanks!

• Gérard Talbot

  Mon Aug 17 16:01:41 2009

  Zoffix,
  
  The difference is that no css reset is involved (browser defaults are just okay here; otherwise they are generally ok), the most reduced only-necessary code required is involved. This makes IE engine software development, IE engine software debugging and IE engine software fixing/correcting much more accurate, verifiable, [because] targeted.
  
  Right now, I am able to create a good testcase with only 5 CSS declarations. Generally speaking for bug reporting or testcase making, the more reduced, the better it is.
  
  regards, Gérard

• Zoffix Znet

  Sun Aug 16 03:01:18 2009

  Thanks for your input, I honestly don't see a difference in your and my demos aside from being literal with what the problem is.
  
  Your site is great BTW, I think I got a few of my bugs off of it.
  
  Cheers

• Gérard Talbot

  Sun Aug 16 02:14:20 2009

  Hello Zoffix Znet,
  
  I believe you can improve your demo webpage by simplifying it like this:
  
  <style type="text/css">
  #container
  {
  background-color: red;
  border: solid;
  }
  
  #middle-man
  {
  background-color: lime;
  padding-top: 2%;
  padding-bottom: 2%;
  }
  
  p
  {
  background-color: white;
  margin: 100px 0 100px 0;
  }
  </style>
  
  </head>
  
  <body>
  
  <div id="container">
  <div id="middle-man">
  <p>There should be no red in this page</p>
  </div>
  </div>
  
  I have linked your IE 8 bugs collection to my website:
  
  http://www.gtalbot.org/BrowserBugsSection/MSIE8Bugs/#SpecificIE8BugCollectionSites
  
  regards, Gérard

Donate / Buy My Books

If you found materials on this site useful, please consider donating a few bucks to the author. Thank you.

Alternatively, purchase my book: