Most of you reading this article are probably saying, “Ya we know DOCTYPE is the first thing you add.”   I mean man it is on the top of the page.

Well anyway just a couple days ago, I had a friend of whom I generally trust his markup skills come to me with a center align issue in IE7.

I took about 5 minutes and combed through the site via Firebug and the Developer Toolbar (kind of like Firebug for IE)  I couldn’t  see any good reason that his main container div should not be centered.

The CSS and markup was right and the parent container element looked like it wasn’t causing any interference.  I have to admit for a minute I was stumped.

Well my last step was to pull out the source markup and check for unclosed div elements.  (I was getting desperate).  In doing this I saw he had no DOCTYPE!  This was making IE7 run in quirks mode.  When my friend added the DOCTYPE his page magically worked the way it was supposed to.

So that you guys and gals don’t make the same mistake, I included below what I should have done in this situation.  (I use the excuse that my friend normally wouldn’t make this mistake, and that’s why I didn’t follow the below steps.)

Okay I should have looked at the markup first and made sure there was a DOCTYPE.  Secondly I should have run the site through validation.

There ya have it.  A small post on the importance of a DOCTYPE.  I hope it has helped.  I also have a couple links below to good DOCTYPE information.

• A List Apart article on DOCTYPEs
• An article on Quirks mode
• One more article on Quirks mode with some links of it’s own.