Why do my pages trigger quirks mode in IE6 or IE7?

I was dealing with this a few weeks ago and it took me awhile to figure out. I had a proper doctype and viewing the source code showed that everything was okay. I was trouble shooting the php html and css, but to no avail. I’d dealt with this issue once in the past, I was sure of it. Finally it hit me when looking through the drop-downs of Notepad++. It turned out to be the character encoding, or the BOM in the character coding to be precise.

If you are using a UTF-8 character encoding and the BOM (Byte-order mark) is included, it will cause Internet Explorer 6 or 7 to go into quirks mode. This can throw off your page rendering. The obvious signs are when your page is no longer centred or you have wacky padding which can cause the entire layout to be thrown out of whack.

In Dreamweaver you can go to Modify / Page Properties and then select Title/Encoding. If you have an encoding of Unicode (UTF-8) selected you should see a check box at the bottom that says “Include Unicode Signature (BOM)“. If this is checked, uncheck it. In notepad++, my text editor of choice, you can go to Format / Encode in UTF-8 without BOM. Other editors should also have an option similar somewhere to change the character encoding behaviour.

If this was the problem, then your page should now be rending with the appropriate doctype instead of quirks mode.