Home · Web Design · Quirks Mode - what it is, and how to deal with it

Quirks Mode - what it is, and how to deal with it

There's been some question about what quirks mode is, and the parallel question, what standards mode is. For many web designers, these are still unknown words - so I hope we can clear some of this up and give a platform for further learning.

Up until version 5 browsers, there was a lot of non-standard rendering (unusual spacing, padding, margins, browser-proprietary HTML tags, etc.) built into user agents (browsers). A lot of this behavior didn't conform to the W3C rendering recommendations at all, but it was what we worked with, and we got very used to it.

And then came the move to standards, with Document Type Declarations (DTD) and all that. But how can new browsers handle those legacy pages, which still exist all over the web, and that depend on "quirky" behavior in order to look good?

That became the question, and the answer is "quirks" mode.

If a browser sees a full DTD as the FIRST element of a document, including the W3C URL for the details, then it renders the page in "standards" mode. Because standards are still relatively young, there is some variation from one browser to another, but it's usually minor.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!-- This is a full DTD for XHTML 1.0. The page will
display in standards mode. -->

But if a browser sees no DTD, or a partial DTD, then it goes into "quirks mode", which essentially means rendering the page the wrong way, but the way we were used to up until version 5. (In the case of IE7, version 6)

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<!-- This is a partial DTD. A lot of web sites used this
for HTML 4.01. The page will display in quirks mode. -->

What this all means in specific detail goes way beyond the scope of this document. But here are several References to find more information on this.

Related URLs:

Jul 08, 2007

Comments

This article hasn't been commented yet.

Write a comment

* = required field

:

:

:


1 + 5 =