Using the DOCTYPE Element in Quirks Mode

Leave Out the Doctype to Put Browsers into Quirks Mode

If you've been designing web pages for more than a few months, you are most likely aware of the difficulty in writing a page that looks the same in all browsers. In point of fact, that's impossible. Many browsers were written with special features that only they could handle. Or they have special ways of handling things that are different from how other browsers handle them. For example:

DOCTYPE

calls.

  • Layers were created for use in Netscape browsers. They don't work in any other browser, and in fact have been deprecated in Netscape 6.x+.
  • Inline frames were originally created for Internet Explorer only, and have since become part of the HTML specification.
  • Internet Explorer 6.0 adds an additional space (like a
    ) surrounding tags unless you write the contents of the div all on one (long) line. (IE 6 has many more quirks as well as this one.)
  • Netscape 4.7 will not display tables that are not written in correct HTML - it shows a blank page instead. This was fixed in Netscape 6.

The problem for browser developers is that they have to create web browsers that are backward compatible with web pages built for older browsers. In order to deal with this issue, browser makers created modes for the browsers to operate in. These modes are defined by the presence or absence of a DOCTYPE element and what that

DOCTYPE

calls.

DOCTYPE Switching and “Quirks Mode”

If you put the following

DOCTYPE

Modern browsers (Android 1+, Chrome 1+, IE 6+, iOS 1+, Firefox 1+, Netscape 6+, Opera 6+, Safari 1+) would interpret this in the following fashion:

  1. Because there is a correctly written
    DOCTYPE
    , this triggers standards mode.
  2. It's an HTML 4.01 Transitional document
  3. Because it's in standards mode, most browsers will render the content compliant (or mostly compliant) with HTML 4.01 Transitional

And if you put this

DOCTYPE

This tells modern browsers that you want to display your HTML 4.01 page in strict compliance with the DTD. These browsers will go into "strict" or "standards" mode and render the page in compliance with the standards. (So, for this document, tags such as might be completely ignored by the browser, as the FONT element has been deprecated in HTML 4.01 Strict.)

If you leave the

DOCTYPE

The table below shows what the common browsers do when presented with different common

DOCTYPE

Microsoft Makes It Harder

Internet Explorer 6 also has the feature that if you put anything at all above the

DOCTYPE
declaration, they will go into quirks mode. So, both of these examples will put IE 6 into quirks mode, even though the
DOCTYPE

and the XHTML 1.1

DOCTYPE

Plus, if you get past IE6, then you have the “feature” that Microsoft added in IE8 and IE9:

META
element switching

  • IE 5.5 quirks mode (IE 8 and 9)
  • IE 7 standards mode (IE 8 and 9)
  • IE 8 almost standards mode (IE 8 and 9)
  • IE 8 standards mode (IE 8 and 9)
  • IE 9 almost standards mode (IE 9)
  • IE 9 standards mode (IE 9)
  • XML mode (IE 9)

IE 8 also introduced “Compatibility Mode” where the user could choose to change the rendering model back to IE 7 mode. So that even if you set the mode you want to set using both the

DOCTYPE
and
META
elements, your page could still

What Is Quirks Mode?

Quirks mode was created to help deal with all the strange rendering and non-compliant browser support and hacks that web designers were using to deal with those things. The concern that browser manufacturers had was that if they switched their browsers over to full specification compliance, web designers would be left behind. By setting up

DOCTYPE

Quirks Mode Effects

There are several effects that most browsers use in Quirks Mode:

  • In some browsers, the box model changes to the IE 5.5 version of the box model in quirks mode.
  • Some browsers don't inherit styles into tables
  • Quirks mode affects the parsing of CSS and CSS layout dramatically, if you are converting pages to standards mode from quirks mode, be sure to test your CSS layout and parsing extensively.
  • Watch for changes to scripting when in quirks mode. Firefox changes the way the
    id
    attribute works, for example. IE8 and IE9 have very dramatic changes to scripting in quirks mode.

There are also a difference in “Almost Standards Mode:”

  • The height of table cells with only images inside is computed differently from standards mode.

How to Choose a DOCTYPE

I go into more detail in my article

DOCTYPE 

  1. Always choose standards mode first. And the current standard you should be using is HTML5: Unless you have a specific reason to avoid using the HTML5
    DOCTYPE
    , this is what you should be using.
  2. Go to strict HTML 4.01 if you need to validate legacy elements or want to avoid new features for some reason:
  3. If you have sliced images in a table and don't want to fix them, go to Transitional HTML 4.01:
  4. Don't write pages deliberately in quirks mode. Always use a
    DOCTYPE
    . This will save you on development time in the future, and really has no benefit. IE6 is rapidly losing popularity and by designing for this browser (which is essentially what designing in quirks mode is) you are limiting yourself, your readers, and your pages. If you must write for IE 6 or 7, then use conditional comments to support them, rather than forcing modern browsers into quirks mode.

Why Use DOCTYPE

Once you're aware of this type of

DOCTYPE
switching going on, you can affect your web pages more directly by using a
DOCTYPE
that indicates what the browser can expect from your page. Also, once you start using
DOCTYPE

Browser Versions and Quirks Mode

DOCTYPE Android
Chrome
Firefox
IE 8+
iOS
Opera 7.5+
Safari
IE 6
IE 7
Opera 7
Netscape 6
None Quirks Mode Quirks Mode Quirks Mode
HTML 3.2
Quirks Mode Quirks Mode Quirks Mode
HTML 4.01
Transitional Standards Mode* Standards Mode* Standards Mode
Transitional Quirks Mode Quirks Mode Quirks Mode
Strict Standards Mode Standards Mode* Standards Mode
Strict Standards Mode Standards Mode* Standards Mode
HTML5
Standards Mode Standards Mode* Quirks Mode
*With this DOCTYPE, browsers are close to standards compliant, but have some issues—be sure to test. This is also known as “Almost Standards Mode.”
Format
mla apa chicago
Your Citation
Kyrnin, Jennifer. "Using the DOCTYPE Element in Quirks Mode." ThoughtCo, Apr. 5, 2023, thoughtco.com/using-doctype-element-3464264. Kyrnin, Jennifer. (2023, April 5). Using the DOCTYPE Element in Quirks Mode. Retrieved from https://www.thoughtco.com/using-doctype-element-3464264 Kyrnin, Jennifer. "Using the DOCTYPE Element in Quirks Mode." ThoughtCo. https://www.thoughtco.com/using-doctype-element-3464264 (accessed March 28, 2024).