A few years ago, someone at Microsoft had a brilliant idea to create something called “Quirks Mode” for Internet Explorer. The reasoning behind it is still a bit beyond me, but apparently it has to do with trying to make the browser render old Web sites the way they were initially intended to look. Basically, “quirks mode” turns all versions of IE into IE 4 (as it essentially attempts to render the page the way it would have been rendered with IE 4, ignoring quite a bit of CSS and XHTML).However, by putting IE into “quirks mode,” you can really mess up any page that’s been written according to any kind of W3C standards. What makes matters worse is the fact that IE can really easily slip into quirks mode without you intending it to do so.
Basically, any time IE encounters anything at all before a standard doctype declaration, it throws itself into quirks mode. I am constantly battling this on one of my Web sites, because I’m using PHP to build the whole page, then printing the whole page at once to the screen (to ensure that I’m able to alter the headers, assign cookies, etc. before anything gets printed).
However, every once in a while, for debugging purposes, I need to print some sort of code or error message before the page is printed. I usually place these error messages inside of HTML-style comment tags. When I do so, however, those print above the doctype declaration, which throws IE into quirks mode.
Sometimes, I will forget that those HTML comments have that effect, and will also forget to remove them once I’m done debugging the issue. This can cause serious problems with a Web site.
For instance, the other day, I got a phone call from one of the guys that adds events to our Web calendar. He told me that he had just added something to the calendar, but when he tries to view it, the table is blank. I checked it out in Firefox and everything looked exactly the way it should.
However, when I opened IE, sure enough, the table was completely empty. I then noticed that, if I highlighted the areas where text was supposed to be, there was text inside. However, that text was larger than it is supposed to be, and obviously was being displayed in the same color as the page background (rendering it invisible). In addition, there was extra space at the top of the page that shouldn’t have been there.
I quickly checked the source of the page and found a comment at the very top. As soon as I figured out which PHP function was printing that comment and removed it, the page went back to normal.
So, this is somewhat of a warning for anyone that develops Web pages.
A) Make sure you constantly check things out in multiple browsers. I usually check things in Firefox, IE 6 and IE 7. Occasionally, I will check them in Safari and Opera, as well. However, it’s obvious that I need to start checking things in IE more often.
B) Make sure you use a doctype declaration in your pages. Also, make sure that doctype matches what you are doing with the code.
C) Make sure you don’t have anything at all in your source code that appears before the doctype declaration. Again, if IE encounters anything at all besides whitespace before it sees the doctype, everything on your page is completely open to interpretation according to IE 4 and below.
If you are working on a Web site and are scratching your head as to why it looks so bad in IE, make sure you check B and C above. It could save you a lot of headaches down the road.
3 Responses
A very useful article, thankyou very much. I had a typo in my doctype which was forceing IE into quirks.
You can add this meta tag to your document for IE8+:
Well, quirks mode is useful, very useful for browser compatibility testing. Given that IE is the bane of the developers existance, quirks mode gives me an alternative to installing IE 6, 7, 8, 9, and 10, and each sucks and renders pages slightly differently. Hence upgrade to firefox or chrome!
I wouldn’t say IE10 sucks — In fact, I would say it is very good! It’s faster than my Chrome.