Activating the Right Layout Mode in Mozilla and IE 5 for Mac

In order to deal with both old tag soup written to old browser quirks and new standards-compliant pages, Mozilla (and Mozilla-based browsers, such as Netscape 6) and IE 5 for Mac have two layout modes. In one mode the layout engine attempts to comply with W3C Recommendations. In the other mode the layout engine tries to mimic old browsers. In Mozilla these modes are known as “the standards mode” and “the quirks mode” respectively. In this document the same names are used also when referring to the modes of IE 5 for Mac.

Note: This document describes the situation with Mozilla builds made available at ftp.mozilla.org on 2000-10-19 and later (and with Netscape 6). The doctype sniffing logic has been changed after Mozilla M18 (and Netscape 6 PR3).

Background

“Tag soup” is a term that is used of documents that are thought by some to be HTML and contain HTML tags but are not valid HTML. Tag soup is usually related to HTML being mistakenly considered a page description programming language which it is not. The authoring practice of considering something correct if it happens to work in one browser also tends to result in tag soup.

Old browsers didn’t throw out tag soup. New browsers can’t do so now because of existing legacy content. However, the use tag soup is discouraged. Tag soup does not interact well with style sheets.

The bugs and non-standards behaviors of old browsers such as Netscape Navigator 4.x (and even IE 5.0 for Windows!) are called “quirks”. For example, not inheriting styles into tables is a quirk. Sometimes pages have been authored in such a way that their layout depends on quirks.

In this document, the term “standards” refers to the relevant Recommendations of the World Wide Web ConsortiumHTML 4.01 and CSS2 in particular. Compliance with the Recommendations does not only imply syntactic validity. It also implies that the document is designed to work with the CSS box layout model, which isn’t identical with the layout model used in many browsers since Netscape Navigator 1.x.

Rendering quirky pages according to standards would make them look different from what the author most likely intended. On the other hand, authoring according to the standards is a big win compared to writing for old quirks forever. To address this conflict Mozilla and IE 5 for Mac have two layout modes.

Doctype Sniffing

Both Mozilla and IE 5 for Mac use doctype sniffing to decide between the standards mode and the quirks mode. This means that the mode is picked based on the doctype declaration (or the lack thereof) at the beginning of an HTML document.

A doctype declaration contains a reference a document type definition which, in turn, contains information about syntactic rules for a class of documents. In HTML the doctype declaration is also used to communicate HTML version information. A doctype declaration begins with the string “<!DOCTYPE” and is placed in the document before anything else.

Handling of Some Doctype Declarations

In both browsers the lack of a doctype declaration, the use of a pre-HTML 4.0 doctype declaration or the use of an HTML 4.x Transitional doctype declaration without an URI trigger the respective quirks modes. HTML 4.x Strict doctype declarations and the HTML 4.01 Transitional doctype declaration with the URI trigger the respective standards modes. However, the HTML 4.0 Transitional doctype declaration with the URI triggers the quirks mode in Mozilla and the standards mode in IE 5 for Mac.

No doctype declaration
Quirks
Pre-HTML 4.0 doctype declaration eg. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
Quirks
HTML 4.x Strict doctype declaration eg. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Standards
HTML 4.x Transitional doctype declaration without a URI eg. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
Quirks
HTML 4.01 Transitional doctype declaration with the URI ie. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Standards
HTML 4.0 Transitional doctype declaration with the URI ie. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Quirks in Mozilla, Standards in IE 5 for Mac

Choosing a Doctype Declaration

Here are simple guidelines for choosing a doctype declaration for a new document:

Document contains tag soup and/or relies on quirks
No doctype declaration
Document validates as HTML 4.01 Transitional (may contain deprecated markup) and works with the CSS2 box layout model
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Document validates as HTML 4.01 Strict and works with the CSS2 box layout model
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Note: A doctype declaration should not be included in a document that doesn’t validate or relies on the old layout model of Navigator 1.x through 4.x. Compatibility with the CSS2 box layout model is important. In particular, the vertical alignment of images and the vertical sizing of boxes around images is noteworthy. Mozilla honors the CSS2 specification when calculating the height of boxes in its standards layout mode. IE 5 for Mac uses the Navigator 1.x model with boxes around images even in its standards mode. Testing image alignment in IE 5 for Mac alone is inadequate. Mozilla M18 or Netscape 6 PR3 are’t suitable, either. (Newer builds are. See the note at the beginning of this document.)


Contents Copyright Henri Sivonen

Any trademarks belong to their respective holders.

Valid HTML 4.01! Valid CSS!

Last updated: 2000-11-14