DOCType? Why do I need that?

I got a comment on my last post (CSS Positioning: Margin, Border, and Padding) that was rather blut, telling me to pull it down, as it was confusing and IE rendered things incorrectly.  I did a little checking into things and s/he was partially correct.

In all ASP.NET and HTML page templates that are supplied by VWD, they all include a DOCTYPE at the top of the page. 

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “”>

You’ve likely seen it on all kinds of pages.  The interesting thing about including this DOCTYPE in your page, is that it causes IE to render in a more standard, and acceptable way.  When it’s not there, IE renders in what is called “quirks” mode.  For example, without it, IE counts the width of the DIV as the content, plus the padding and border width!  So suddenly, your 500px DIV is no longer 500px, but 500px minus the width of your border (for each side) and minus the width of your padding.

And that is why you should always include the DOCTYPE line, in your page.  It’ll make sure that IE behaves itself, and doesn’t get all “quirky”.  It’s also why my fine art photo website doesn’t render properly!  I took it out not realizing it.  Oops!  That’s also why this page doesn’t render quite correctly, the blog software use doesn’t have the correct DOCTYPE line in it, so things render in quirks mode.

Comments (5)

  1. PeteL's Blog says:

    UPDATE: After reading this post, read the important addendum I added with the post titled DOCType? Why…

  2. Carlos Lone says:

    Pete, Thanks alot for bringing us such an insteresting topic. Usually, we just use the software “as-is”, and never do more researching, that’s why sometimes we didn’t realize why strange behaviors happens in our applications.

    Thanks again!!! very interesting.


  3. Ali Taki says:

    So, will it make it slower, or in other words what is the effect on performence, why did they use "quirks" mode in the first place?