DOCTYPE blues

Yesterday I was working on the layout for a new site. I missed the DOCTYPE declaration in the HTML. The page had the main content included inside a div.

Following is the CSS that I used.

body {
      font-family: Georgia;
      font-size: 14px;
}
#main-content p{
      margin: 0;
      padding: 0;
      padding-bottom: 15px;
}

This worked perfectly and rendered well on Firefox and Chrome. But when I opened the same page in IE, the font was too large for all content inside the ‘main-content’ div. Also in order to center the page, I had used ‘margin: auto’ on the page container that encompasses all content in the body as below

#page-container {
      width: 760px;
      margin: auto;
}

This too didn’t seem to work in IE as the content was left aligned instead of centered, but rendered ‘centered’ in Firefox and Chrome.
Looking out for a solution on the net, I found that missing the DOCTYPE declaration was the cause for the issue. Here is the reason.

Without the DOCTYPE declaration, the browser has rendered the page in quirks mode. Adding the DOCTYPE made the browser render the page following the rules set by the standard.

So never forget your doctype declarations.