Home > Administration, Web Design > Disabling the Quirks mode under Internet Explorer

Disabling the Quirks mode under Internet Explorer

March 21st, 2013 Leave a comment Go to comments

Motivation for writing

Few days ago I noticed that my blog is not shown correctly under Internet Explorer.I was quite sure that it wasn’t the case 1 month ago, because I would have noticed such a problem. It looked like this :


 So I started debugging it and I reached to an interesting conclusion.


Margin auto is not working correctly under Internet Explorer

Obviously there was a problem with the margins, and more precisely with the margin:auto property. If you’ve read my post on static website design, you should know that the margin auto property is usually is used to centralize divs horizontally.


What is the Quirks Mode

While I was debugging under Internet Explorer, I noticed that it’s running in the so-called Quirks Mode.


The Quirks mode in Internet Explorer (but not only) is a compatibility mode that helps with the visualization  of older pages, which are not compatible with the W3C standard.


What triggers Quirks mode in Internet Explorer

By default it’s switched off, but there are some factors that usually triggers it. For example, the DOCTYPE declaration in the beginning of your html. The proper HTML5 syntax is as follows :

<!DOCTYPE html>

The following excerpt will also not trigger Quirks mode :

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 

The following declarations will, however, trigger Quirks mode :

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- some comment here -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

The problem with the first declaration is that it is uncomplete. In the second and third ones, there is content before the DOCTYPE declaration, which is not standard compliant.

When I switched to IE standard 7, 8 or 9, everything was working fine. So in order to avoid Quirks mode activation, you should comply to few simple rules. 


Rules to obey in order to avoid Quirks mode activation

  • The DOCTYPE element should be the first thing you include in your page
  • Don’t include comments/javascript/xml or whatever before the DOCTYPE element
  • Check the DOCTYPE declarations per standards here and use the latest whenever possible


Like the article ? Share it ! ;)

  1. July 21st, 2013 at 03:03 | #1

    My problem is just the opposite–I want IE8 to automatically switch to Quirks mode when I view the so-called "legacy" pages I've created over a period of several years. All other browsers I've tried (Safari, Chrome, Firefox, even SeaMonkey) render my pages–written with html 4.01 transitional without the DOCTYPE at top–pop up correctly, as I intended them. When viewed through IE8 Standard mode, all of the text I placed within tables is center-aligned–not aligned left, as I had intended. This makes for amateur-appearing web pages, to say the least.

    Here's the problem. Up until a couple of days ago, my legacy pages–an example of which is http://inyo.coffeecup.com/site/barstowfossils/barstowfossils.html — were all rendered correctly in IE8, without having to deliberately, manually, switching to Quirks Mode (from the Tools-Web Developer options). Quirks popped in automatically–now it does not. Now I have to go into Tools-Web Developer and so on to switch over the Quirks mode. I am fearful that everyone else out there in cyber land is having the same problems with the center-aligned text problems on my pages. What's going on? What's the solution?


    By the way, when I preview one of my pages in IE8, all is good–no center-aligned text within tables. But, when I view that same page through the World Wide Web, all is not good–center-aligned text appears within tables.

  2. July 21st, 2013 at 09:59 | #2

    Hi Inyo, 

    The problem is in the <center> tag before every one of your tables. That is basically causing every inner element to be rendered that way. Just remove these tags and use CSS instead. 

    Hope this helps. 


  1. No trackbacks yet.

Copyright © Developing the future 2013. Licensed under the CC> BY-NC-ND 3.0 Creative Commons license.       
Audi R8 wallpapers Sony Xperia Z4 Tablet WiFi