The Browser Display Issue

Many web programmers have been annoyed at the differences between the way IE and Netscape display div borders and margins, and this is often called the IE Box Model Problem. The W3C specs and Netscape say to add borders and padding to our div boxes, but IE (in the normal quirks mode in IE6 and in all IEs before IE6) doesn't (we like IE's quirks way best). You may be tempted to get one of those long JavaScript routines off the Net that will force sites to display Netscape and IE the same, since they don’t do it otherwise. In our opinion, it isn't worth it: there are just too many things that can go wrong. Better to design web pages that allow enough room for browser display variations. And feel free to use a browser sniffer for specific objects like the button we had to resize on our atest-buttons-and-menu-tests.html page. The resizing was for Netscape only because they insist on following W3C specs, which they technically should, but we'd have liked to see everyone do it the IE way and the W3C get forced to change their spec, since it's clumsy to work with. The adding of borders and padding to the stated box size (so that you'll often need to refigure your box size in practice—see code below) is what you'll often do with the "correct" box model. It's kind of like always knowing when to use the word "whom" correctly. Most people avoid the damn word because it's hard to get it right and not worth the effort. How many people do you know who use it a lot? See what we mean?

Okay, now, here's the rest of the story. In quirks mode (doctype) all IEs get the box model wrong, but from IE6 on the strict mode (doctype) gets the box model right. But in December 2003, when we wrote this, 62% of people were using IE6 but 32% were still using IE5 or IE5.5! So if you write for strict mode IE6 your W3C-compliant box model handling will be right only 62% of the time and wrong 32% of the time because using the strict doctype isn't going to magically change browsers from IE5 to IE6! A strict (a.k.a. standard) model (with borders and padding outside the stated width) is good to know about, but knowing when to write for it isn't so easy. Perhaps waiting until the combined IE5 and IE5.5 usage is below 1%, like IE4 (and NN4) is now, is the best time to "go strict." There seems to be as many opinions on this as there are web programmers.

And finally, let's take a peek at the nested div work-around. It's smart strategy and a good idea, when needed. All that's required is that you put all your divs inside other divs and declare the width and margin properties for the outer div only and the border and padding for the inner div only! The main thing to remember that's weird here is when you are giving the width of that outer div, add width + left padding + right padding + left border + right border and use the sum of these as your outer div width. So for a box with padding of 20 and border of 10 and width (the "contents") of 250, make sure that 250+20+20+10+10=310 is the width that you declare instead of 250. This will make your page work in IE5, IE5.5, IE6, Netscape6+, Opera, Mozilla, etc., We're all for this if you're dealing with thick borders or padding and the page you're designing needs this to look right on both IE and Netscape. Since Netscape6+ has the same W3C-compliant box model as strict doctype IE6, if you have IE6 you need to go back and forth from strict to quirks mode to check out your page. But why mess with doctypes when keeping around a computer with IE5.5 on it means that in any doctype you'll still have the box bug to test against? We keep a 5.5 and a 6 here.

The part of the code that's red below is dealing with a colored div button with a width of 72. Netscape7 is adding the 1-pixel-thick border to it (padding is 0) and making the div 74, so we're telling Netscape we lied and the width is only 70 so when it adds 2 for the border it gives us the 72 we wanted in the first place. Since we can do that for every div on the page or a selected group with just a simple for loop (as long as the divs have sequentially addressable id names like a1, a2, a3 . . . a43), we have to ask ourselves: Isn't this a lot easier than making outer divs to surround our normal divs and splitting up property declarations and calculating new widths everywhere?

function startmouse() {if(Netscape) {document.captureEvents(Event.MOUSEMOVE);document.getElementById('id54').style.width=70;}

document.onmousemove=getCoords;

}