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.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s