Warren Falk

I’m all for standards in web browsers. But it really bugs me when the standards-compliant behavior is worse than the non-compliant browsers’ behavior. So here we have made a standard protocol, and to follow the protocol means making your browser behave poorly. This isn’t always the case. Quite often the standard is better, and for the most part a standard is almost always better than no standard.

It’s almost strange how little agreement there is between browser makers on the best way to implement what’s known as the box model. The box model refers to the dimensions and spacing given to html tags. For instance, a box in html has the main body where the text goes, surrounded by the padding which is filled with the object’s background color but is otherwise empty of text. That is surrounded by the border, which is surrounded by the margin, which is more empty space which is transparent and collapses against (is allowed to overlap) margins of other elements. The confusion comes when it’s time to set the width of the element. To which part of the box model does/should the width refer?

The standard apparently says that the width refers to the body part, not the padding. Internet Explorer, on the other hand, says that the width refers to the body plus the padding plus the border. Oddly, in standards compliant mode, IE still says that the width refers to the body plus the padding. IE’s “quirks” way makes the most sense to me. The standard way does not. Why? Because the standard way makes certain things impossible, whereas, IE’s way does not.

Take for instance a table of data. In one column of the table, you have an input field in each row so that the user can edit information. You want the input field to expand horizontally in size to fill the cell it’s in. So you set its width to 100% and that works perfectly, except you notice that the text seems to butt up against the left edge too closely, so you add padding to the left (about five pixels (5px) or so). Ah, that seems to work fine in IE, but in Firefox, now, the right edge of your input field has encroached five pixels into the neighboring cell on the right. Why? Because the 100% width you set doesn’t apply to the padding. So how do you take the padding into account? You can’t, because you can’t do math in CSS. Otherwise 100% – 5px would be nice. Or it might be nice to be able to actually specify which part of the box model you want width to affect.

Now IE gets a lot of flack when it doesn’t adhere to the standard, and for the most part it should. And I like that IE can be switched into “compliance” mode with a DOCTYPE declaration (even though it is only a little more compliant). However, I often find that it is the standard which is most annoying.