DOCTYPE switch and web design

A lot of people don’t know that the DOCTYPE switch in your web page can have a profound impact on how your page layout works. For example, the CSS Box Model will look different in WinIE 6 depending on the DOCTYPE switch. If you are doing web design today, make sure the browser you are targeting is not rendering in quirk mode.

Here is a great table of all the different effects DOCTYPE switch has on some different browsers.

Comments (8)

  1. Good info. I always assumed Trident renders HTML the same, DOCTYPE or not.

  2. Just had to think of it this morning:

    Assuming a proper DOCTYPE makes IE render standards-compliant (as claimed on the site you linked the table from), I take it that most people complaining about IE being non-standard et al are using DOCTYPEs in their code that make the browser run in quirk mode?

  3. Omar Shahine says:

    Yes, that has been my experience.

    I spent a lot of time working on a standards compliant theme for dasBlog. Not having IE in standards compliant mode made it impossible to get my pages to render in IE, MacIE, Safari, and Firefox.

  4. Jeremy says:

    Even in standards compliant mode, there are still rendering errors in IE (as well as Firefox). Unfortunately, this solution isn’t the end all of problems with IE rendering.

  5. Umberto Malandrucco says:

    I have to test your interesting tip but your site uses a doctype marked as "quirk" in the table!

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >



    Infact this page renders bad in FireFox I’m currently using…

  6. I casually realized a strange behaviour of Firefox 0.8/9 about DOCTYPE.

    If the doctype tag is absent in my document everything works.

    If it’s present there’a visualization problem on a table (an alignment error of a cell) and a javascript can’t access a W3C DOM paddingTop property