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.

1
2
3
4
5
6
7
8
9

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

1
2
3
4

#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.

I got to work with Adobe Illustrator today. And here is what I created. Illustrator has templates and tools, lots I should say. Getting my hands dirty with all the tools.

Here is a sneak peek into my work.

It is a 1 MB file. Could take some time to load. Please bear.

I have designed custom header for this blog . I have used my favourite color combination, red, black and white.