Box Model and IE question

For the sake of brevity, I will limit the scope of my question to IE6 and up.

Given a test DIV with width:500px; and padding:0 50px;, for example. I would expected to to take up 500px in IE and 600px in compliant browsers and thus require odd hacks or conditional statements to render consistently cross-browser.

Probably everyone on this forum knows that IE supposedly interprets the box model incorrectly, so on occasions when block elements are given explicit dimensions AND padding the rendered size will be different for IE than for complainant browsers. I reading about this, I found an article saying this was only true of IE in quirks mode, which is triggered by transitional or incomplete doctypes.

so my questions are:

  1. Does this mean if I use the following strict doctype, for example :


that I wont have to set different widths for IE and compliant browsers??

  1. Since this seem rather a simple but not particularly wide spread way of avoiding a lot of measurement hassles. Does IE do something different in standards mode (or something one should be aware of) that makes this an impractical fix for box model differences?

  2. Since I KNOW IE will be touchy about what sends it into quirks mode… does anyone know of a resource/chart that lists what doctype declarations send IE into quirks for versions 6 and up. ( I found one for IE4-6, but of course that’s essentially obsolete)

  3. One more curious Q. What effect would a HTML5 doctype have on an IE browser that was created before HTML5…

  1. Yes, the broken box model is IE5 only, and quirks mode (aka incomplete doctype/no doctype/something above hte doctype) will result in all IE being like IE5.

  2. Not really :). It just behaves more compliant, though it just has bugs, that’s just poor browser :slight_smile:

  3. Any doctype that doesn’t have a URI on the end (the http:// stuff), or something above the doctype will send it :). And of course, no doctype at all. That’s it :slight_smile:

It would still make it be in standards mode I believe :). I use it a lot during testing.

Thanks Ryan.

but since the HTML5 doctype doesnt have any URL, does that send IE into quirks??

No because the short form of the doctype like that is considered to be complete without needing any of the rest. It is only if you include part but not all of the other info that it beomes incomplete.

Ok… this is what s blowing my mind…

How does IE7, for example , know that <!DOCTYPE html> is complete and strict declaration since he browser predates HTML5??

Because that is a valid HTML 2 doctype as well - it is the short version of the doctype which doesn’t specify which version of HTML is being used and is therefore valid for any version of HTML from 2 onwards.

It is NOT specific to HTML 5. Those developing HTML 5 just decided that it isn’t necessary to distinguish which version of HTML the page is using in the doctype since it makes no difference to web browsers (only to validators).