JavaScript and DHTML Cookbook-JavaScript and DHTML Cookbook

11.13 Forcing Version 6 Browsers into Standards-Compatibility Mode

NN 6, IE 6

11.13.1 Problem

You want IE 6 and NN 6 or later to behave in keeping with the W3C specification for Cascading Style Sheets, rather than honoring old style behaviors now deemed to be out of standard.

11.13.2 Solution

Specify a DOCTYPE element as the first element of a document with any of the modern value sets. Some declarations require the URL portion to force the document into CSS-compatibility mode.

Use the following element if the document's markup generally follows the W3C HTML 4.0 recommendation, but also may include items deprecated from earlier versions (URL required for standards-compatible mode):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
        "http://www.w3.org/TR/REC-html40/loose.dtd">

The following element is for a framesetting document that follows the HTML 4.0 recommendation (URL required for standards-compatible mode):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN"
        "http://www.w3.org/TR/REC-html40/frameset.dtd">

Use this element if the document's markup strictly adheres to the W3C HTML 4.0 recommendation (URL not required for standards-compatible mode):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
        "http://www.w3.org/TR/REC-html40/strict.dtd">

Use the following element if the document's markup generally follows the W3C XHTML 1.0 recommendation, but may also include items deprecated from HTML 4.0 (URL not required for standards-compatible mode):

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

The following element is for a framesetting document that follows the W3C XHTML 1.0 recommendation with the addition of frame-related terminology (URL not required for standards-compatible mode):

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

Use this element if the document's markup strictly adheres to the W3C XHTML 1.0 recommendation (URL not required for standards-compatible mode):

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

Use the following element if the document's markup strictly adheres to the W3C XHTML 1.1 recommendation (URL not required for standards-compatible mode):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
        "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Including a DOCTYPE element for a particular HTML or XHTML level does not affect the browser's ability to recognize and render tags and attributes outside of the stated recommendation.

11.13.3 Discussion

The difference between standards-compatible mode and the earlier (sometimes called "quirks") mode varies by browser. You may not even notice a difference in Netscape 6 or later between the two modes, except for an occasional variance in pixel spacing around form controls. The differences are more significant in IE 6, however. The W3C style sheet group adopted a different way of measuring element sizes with respect to borders, padding, and margins than the way Microsoft had originally implemented back in Internet Explorer 4. In many respects, IE 6 in standards-compatible mode is more predictable in the way it responds to dimensions, margins, and offset measures relative to other elements. The results more closely resemble those of NN 6 or later using the same DOCTYPE specifications. For creating new content, you should utilize the standards-compatible mode for both browsers to get in the habit of operating according to the W3C specification (or at least as closely as the browsers interpret the standards). Earlier browsers do not alter their content rendering based on DOCTYPE declarations.

IE 6 and NN 7 provide a script-accessible property, document.compatMode, which reports the mode in which the document is operating. Property values are either BackCompat or CSS1Compat.

In theory, an XHTML page should also lead with an xml declaration, along with character set information:

<? xml version="1.0" encoding="UTF-8" ?>

But when IE 6 encounters this tag, it holds the browser in backward-compatible mode, regardless of the DOCTYPE declaration. To satisfy the XHTML validators, place your character set information in a meta element in the head portion of the document:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

11.13.4 See Also

Recipe 9.3, Recipe 11.11, Recipe 13.6, Recipe 13.7, Recipe 13.11, Recipe 13.13, Recipe 15.5, and Recipe 15.10 for examples of how scripts and style sheets frequently need to accommodate different CSS modes in IE 6.

[ Team LiB ]