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.
FYI,
There’s another hack for this that is more elegant and doesn’t reduce the reusability of your styles . From “HTML Dog”:
#somebox {
width: 200px;
wid\th: 154px;
…
}
Apparently, IE doesn’t understand escapes in CSS, and (all?) other browsers do. So, IE uses 200px, while other browsers use 154px.
This obviously relies on yet another IE oddity, but in this case, if MS suddenly handles escapes in CSS, the code still works fine. However, if some browser comes out that has the same bug, but not the rendering problem, then you’re screwed :-).
Hmm, I didn’t express IE’s handling of escapes in property names properly. It’s not a matter of “understanding” escapes. It’s just that IE doesn’t see “wid\th” as “width”, and other browsers do.
Mike: It’s the other way around. Every browser ignores “wid\th” as an unrecognized property. IE ignores the backslash and parses it as “width”.
According to ‘HTML Dog’, it’s the other way ’round (I’m just parroting, anyway):
“Basically, IE 5.x won’t recognize property names that are ‘escaped’ in this way in the middle. In this case, it won’t recognize ‘wid\th’ as ‘width,’ whereas other browsers will.”
His whole example is based around this statement, but maybe he has his wires crossed. Whatever, play with it until it works.
THANKYOU!!!!
My margins were all screwed up in IE and fine in FF & Safari………I sorted it with the advice up above…thank you, one week’s work solved in 30 secs. I simply added to my first html page:
and left the existing identifier that I had, thus having both:
Conditional comments only work in Explorer on Windows, and are thus excellently suited to give special instructions meant only for Explorer on Windows. They are supported from Explorer 5 onwards, and it is even possible to distinguish between 5.0, 5.5 and 6.0.
We’re all very excited to start releasing. We’re going to try to restrain ….. damn, works fine for me under FF…. fired up a new IE after a reboot.
Well, aren’t we in a pickle! And you’ve just got us started. Why all the wannabe standards deprecation from Microsoft? So they can do sweet things like
blockquote
Anyway, Mike, I thought it was all backwards too - untill I started making blockquotes behave. You have 3 logical layers for each screen element, which makes sense since we live in a 3-dimensional world. But then you have a level of redundancy created by the precedence of margin over padding, and IE’s eternal balancing of content with container. And then you have a buggy transference of layer shuck into the next hapless div. Patrick Griffiths is simply avoiding insults by not taking box model far enough. He’s a righteous dude that way, man!