<rant>

At the danger of causing my Klout score irreparable damage, I want to spend this post using their site to highlight a mistake I’ve seen three times in the last week.

The problem? In a word: Quirks.

I went to Klout.com in IE and rather than seeing the nice, clean, well-structured design they intend, you’ll see a hodgepodge of mangled DIVS and misaligned blocks of colours. Not pretty.

The cause? The developer has placed something before the DOCTYPE of the page. This makes IE assume there is no DOCTYPE and switch to Quirks mode.

You can check to see if a website has had this particular variant of fresh hell heaped upon it by pressing F12 and checking the document mode. If it has been set to Quirks then something is wrong.

Beating quirks is simple

There’s no real rocket surgery here. The 3 most common causes behind the Quirks I see on a regular basis are:

  • The developer has placed a verification comment above the DOCTYPE. (Services often ask developers to place a comment with a particular code in their web page so that the site can verify that they are the owner of the site before allowing access to the service. Remember if you are doing this add the verification inside the head tag.)
  • The developer added comments about the source code before the DOCTYPE. The solution is to simply move the comments below the DOCTYPE.
  • Or, as Klout did, the developer added a body tag before the DOCTYPE. Weirdly, if you change the user agent string to Chrome it serves up content that’s not malformed (ie the body tag doesn’t appear before the DOCTYPE). This leads me to think they’re doing some form of browser sniffing. (Browser Sniffing is another pet hate of mine as it makes problems like these even harder to pin down.)

3 simple rules

  1. Always use a DOCTYPE
  2. Never place any content before the DOCTYPE declaration
  3. Check you sites regularly in the W3C validator. Even if you are not looking to get valid HTML, at least you’ll know the issues and can then make an informed decision as to whether you want to fix them

</rant>