A Run In With The Quirks Mode Police

When I first started to design this site I did not pay much attention to standards or validation. I fired up my php / html editor and Firefox then got to work. When I got the basic template squared away I decided to check out what Internet Explorer 8 had done to my design. I was naive to think that Microsoft had retooled IE8 into a smart self helping browser. All of my floats were the wrong width, the text was much larger basically the whole layout was broken. I noticed that IE was rendering in the dreaded quirks mode. This started several rounds of Googling to find out if I was using the right DocType or maybe I was missing a tag or it could be any number of other items IE thought I needed.

Turns out that with IE8 came a brand new compatibility tag that would force the browser to use a specified rendering mode.

<meta content="IE=8(Insert browser mode here)" http-equiv="X-UA-Compatible"/>

This will force IE8 to specifically use the friendly and more standards compliant IE8 rendering mode. The fix works but this only targets IE8, all the people still using IE7 (upgrade please) will get the broken quirks mode. You may ask you self “Change the above code to IE=7 and all is good”. This will force IE8 to use the rendering engine of IE7 however IE7 will still do its own thing.

This is where the “House” epiphany moment happened. I found a web site that mentioned something about having a commented line above the DocType would make Internet Explorer do weird things. I took a look at my code and I had a commented line

<!-- Insert Header File -->
<?php get_header(); ?>

above my php line of code that inserted the header. I removed the commented line and all is well.

<?php get_header(); ?>

I do not even need the special IE8 rendering mode meta tag anymore. I could not believe that something so ridiculous would keep IE from rendering things in a standards mode.