Arman's stuff
Guest
Boxes

(Thu Oct 8 11:25:21 2009)

I blagged a few days ago about box models. It seems I made a blunder...

...and a rather large blunder at that. Internet Explorer - as well as other browsers - uses what is known as "Quirks Mode."

This is evil.

If you don't declare a doctype (among other things; everything-but-IE relies on doctype, but IE uses doctype, special headers/meta tags, and blacklists on the user, intranet admin, and internet-at-large scales. Yeah, that's right, your site could be blacklisted by Microsoft and forced into "Quirks Mode." Like I said - evil.

So what is this quirks mode? To know that, you need to know a bit of history. Way back in the day, Netscape 4 and IE 4 had a war. The Browsers War. Each added all sorts of horrible tags (blink tag, anyone?) to make people use their browser instead, as well as implementing a lot of stuff in different ways. Which meant that if you wanted your site to look even close to what you wanted it to, everyone who visited had to use your browser. Thus the "Best viewed in Internet Explorer 4!" everywhere.
Well, so, when browsers finally started to use the same standards, there were still all these sites that needed support out there. Thus, when a browser sees a page with no doctype, it assumes it's completely off standard, and it's every browser for itself - Quirks Mode Engaged!
One such quirk is the box model.

IE uses the box model I described - if you draw a box with width X and height Y and place it directly over a div with margin, border, and padding, that box will exactly cover the border, the padding, and the div itself. However, the standards say that the box should only cover the inside of the div - not the border or the padding. Some people seem to prefer the former rather than the latter, but I've got a few key reasons I would much rather have the latter:
1) Say that div is a screen someone wants to sell you. You ask how big it is, and the guy measures the whole thing - case, black area where nothing shows up, and screen. This is bad. You don't care about the case that frames the screen (border) or the black area you can't put image on (padding), you just want to know how big the viewable area is!
2) Or say you have an image. You want this image in a box, with padding and a border. If the image is 100px wide, you want to say your div is 100px wide, not 100px plus 2px left border plus 4 px left padding plus 4px right padding plus 2px right border. If I wanted to put that image in a div, asking for a div that was 112px wide just doesn't make sense!
3) It's a standard, live with it.

Ok, so the third reason isn't that great. But it still makes sense - it at least is consistent. I would rather be around someone who was consistently lazy, than someone who was sometimes lazy, and sometimes productive, with nothing to tell me if today was a "productive" day.

So, there's my blunder. I had forgotten the doctype, and thus IE, Opera, and Firefox were in Quirks Mode. Opera and Firefox still made the right side boxes, though; IE was just... ugly. Seriously ugly.

Who had the bright idea for quirks, anyway? Oh, right. Microsoft. Sigh...

Edit: I just had to add this. From HTML Dog:
Your HTML can be flawless and your CSS simply perfect, but without a document declaration, or a wrong document declaration, your web pages can look like they were put together by a short-sighted, one-eyed infant gibbon with learning difficulties.

Yes! I. Am. That. Gibbon!

<< IE vs Just About Everyone ElseJavaScript, CSS, Flash, and Java (and SVG) >>

This blag is tagged: Browsers, Css, Ie, Quirks, Standards, All