IE and the CSS Box Model: Wronger than Wrong
A few days ago I posted a little diagram illustrating the CSS box model:
I then set out to produce a few simple web pages to further illustrate the concept. In Firefox 2.0, my experiment looks like this:
That’s exactly what I wanted. The HTML is really simple:
<div class="outerbox">
<div class="innerbox">
blah blah blah
</div>
</div>
The 100×100 pixel box is a simple GIF with a red border that is part of the image itself, rather than applied via CSS. All of the other colors and borders come from the CSS:
.outerbox {
background: yellow;
border: 10px solid black;
}
.innerbox {
margin: 10px;
padding: 10px;
border: 10px solid green;
background: #cccccc url('100x100square.gif') no-repeat left;
height: 100px;
/* this padding pushes the text to the right of the image */
padding-left: 120px;
}
Bring on IE 7
The exact same page looks like crap in IE 7:
You don’t see any yellow on the top and bottom because the inner box’s margin is ignored. Even worse, the image is clipped on the top and bottom. This is a manifestation of a well known IE bug: the infamous Internet Explorer box model bug.
This is the default behavior of IE 7, known as “quirks mode”.
Standards Mode
To trigger standards mode, add a doctype to the top of the page:
<!DOCTYPE html PUBLIC "-//W3C/DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/DTD/strict.dtd">
The Wikipedia Quirks mode article lists many other doctype variations. With this simple addition to the very first line of the web page, IE 7 is a little closer, but still wrong:
A Workaround is Possible
Even in standards mode, IE 7 renders my page incorrectly. Through trial-and-error, I determined that IE 7 ignores the inner box margin. To fix the problem, I removed the margin and replaced it with padding on the outer box:
.outerbox {
background: yellow;
border: 10px solid black;
/* Use this padding instead of an .innerbox margin to work in IE 7 */
padding: 10px;
}
.innerbox {
/* no more margin here! */
padding: 10px;
border: 10px solid green;
background: #cccccc url(’100×100square.gif’) no-repeat left;
height: 100px;
padding-left: 120px;
}
With this change in place, the page renders correctly in IE 7:
Summary
You can see all of these examples on my CSS Box Model Experiments page.
Imagine…all of this effort simply to make this HTML render consistently:
<div class="outerbox">
<div class="innerbox">
blah blah blah
</div>
</div>
It’s really pathetic.