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.
|