Export (0) Print
Expand All

CSS Enhancements in Internet Explorer 6

As of December 2011, this topic has been archived. As a result, it is no longer actively maintained. For more information, see Archived Content. For information, recommendations, and guidance regarding the current version of Internet Explorer, see Internet Explorer Developer Center.

Lance Silver
Microsoft Corporation

Updated September 2006

Summary: This document describes the enhanced support for the Cascading Style Sheets (CSS) specification provided by Microsoft Internet Explorer 6 or later. (14 printed pages)

Prerequisites: This document assumes that you are familiar with HTML and CSS.

To view the samples in this document, you must have Internet Explorer 6 or later installed on your system. You can download the latest version of Internet Explorer at http://www.microsoft.com/windows/products/winfamily/ie/default.mspx.

Contents

Introduction
The !DOCTYPE "Switch"
Fix the Box Instead of Thinking Outside It
Who Moved My Canvas?
Additional Properties
More Value for Your Property
Stricter Style Sheet Parsing
But Wait, There Are More New Features
The Way It Was
Additional Information

Introduction

Microsoft® Internet Explorer 6 and later supports CSS features that earlier versions of Internet Explorer do not support. Two additional CSS properties are supported—min-height and word-spacing. Several additional possible values are supported, including the pre value of the white-space property and the list-item value of the display property. Other significant features include stricter parsing of style sheets and changing which HTML elements can represent the outermost surface onto which a document's content can be rendered.

These enhancements were made to comply with the CSS specification. All of the properties, values, and features defined in the CSS, Level 1 (CSS1) specification are supported, including the box model that defines how to measure and format elements and their associated margin, border, and padding properties.

But what's really cool is that even with all these enhancements, you're unlikely to experience any significant compatibility problems with applications you developed for earlier versions of Internet Explorer.

The !DOCTYPE "Switch"

This section describes how to use the !DOCTYPE declaration in your document to switch on standards-compliant mode with Internet Explorer 6 or later.

The !DOCTYPE declaration is a Standard Generalized Markup Language (SGML) declaration that specifies the document type definition (DTD) a document (theoretically) conforms to. It looks like an HTML tag with no closing tag, but it starts with an exclamation point (!), and it contains single tokens instead of attribute name-value pairs. This declaration must occur at the beginning of the document, before the HTML tag.

You switch on standards-compliant mode by including the !DOCTYPE declaration at the top of your document, specifying a valid Label in the declaration, and in some cases, specifying the Definition and/or URL. The Label specifies the unique name of the DTD, and can be appended with the version number of the DTD. The Definition specifies the definition of the DTD that is specified in the Label. The URL specifies the location of the DTD.

There are three Definitions specified in the HTML 4.0 specification—Frameset, Transitional, and Strict. Frameset is used for FRAMESET documents. Transitional contains everything except FRAMESET documents, and Strict, according to the HTML 4.0 specification, "...excludes the presentation attributes and elements the World Wide Web Consortium (W3C) expects to phase out as support for style sheets matures."

The following table shows which values of the !DOCTYPE declaration switch on standards-compliant mode with Internet Explorer 6 or later.

LabelDefinitionURL presentURL not present
No !DOCTYPE present OffOff
HTML (No Version Present) Off Off
HTML 2.0 OffOff
HTML 3.0 OffOff
HTML 3.2 OffOff
HTML 4.0No Definition PresentOnOn
HTML 4.0 FramesetOnOff
HTML 4.0TransitionalOnOff
HTML 4.0StrictOnOn
XHTML OnOn
XML OnOn
Unrecognized !DOCTYPE OnOn

The preceding table shows that standards-compliant mode is switched off when the !DOCTYPE declaration is not present in the document, when the Label in the declaration doesn't specify a version of the HTML specification, or when it specifies a version earlier than HTML 4.0. When you specify the Frameset or Transitional Definition of HTML 4.0 in your !DOCTYPE declaration, the table shows that standards-compliant mode is switched on only when you include the URL. Standards-compliant mode is also switched on when you specify the Strict Definition of HTML 4.0 in your !DOCTYPE declaration, and when you specify HTML 4.0 with no Definition.

To allow for the creation of new DTDs, such as HiDad 11.22, standards-compliant mode is switched on when the !DOCTYPE declaration is not recognized. Standards-compliant mode is also switched on when you specify a version of HTML that is not listed in the table, such as HTML 1.0 or HTML 3.22.

!DOCTYPE Examples

The examples in this section show how to use the !DOCTYPE declaration to specify the DTD to which a document conforms and how to switch on standards-compliant mode.

Both of the declarations in the following example specify conformance to the Transitional HTML4.0 DTD. The second declaration specifies the URL of the DTD. The first declaration does not. The second declaration switches on standards-compliant mode with Internet Explorer 6 or later. The first declaration does not.

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

Both of the declarations in the following example specify conformance to the HTML 4.0 DTD. The first declaration does not specify a Definition. The second declaration specifies the Strict Definition of this DTD. Neither declaration specifies the URL. Both of these declarations switch on standards-compliant mode.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN">

Fix the Box Instead of Thinking Outside It

This section describes the way Internet Explorer 6 or later versions calculate the width and height properties of an element when you use the !DOCTYPE declaration to switch on standards-compliant mode, and how this differs from the way earlier versions of Internet Explorer calculate these properties.

The CSS1 box model defines content inside an HTML element as being surrounded by an invisible rectangular bounding box. Surrounding this bounding box are three rectangular belts, represented by the A HREF="http://msdn.microsoft.com/en-us/library/aa977966(VS.71).aspx">margin, border, and padding properties. You can use style sheets to manipulate the dimensions and appearance of the bounding box and the belts surrounding it.

Earlier versions of Internet Explorer calculate the width and height properties in a way that does not comply with the CSS1 box model. In CSS1, the width property is defined as the distance between the left and right edges of the bounding box that surrounds the element's content. Likewise, the height property is defined in CSS1 as the distance between the top and bottom edges of the bounding box. With earlier versions of Internet Explorer, however, the width and height properties also include the border and padding belts that surround the element's bounding box. The following graphic illustrates this difference.

Bb250395.boxdim(en-us,VS.85).gif
Figure 1. Illustration of the difference in the the way width and height properties are calculated in Internet Explorer 6 vs. earlier versions.

Compliant Behavior

With Internet Explorer 6 or later, when you use the !DOCTYPE declaration to switch on standards-compliant mode, the width and height properties specify the distance between the left and right edges and top and bottom edges of the bounding box, respectively. The border and padding belts are not included.

Noncompliant Behavior

When the !DOCTYPE declaration does not switch on standards-compliant mode, as with earlier versions of Internet Explorer, the width property includes the object's content box, plus the values of the following properties: border-left, border-right, padding-left, and padding-right. Subtracting the sum of the values of these properties from the value of the width property equals the width of the parent object's content box. Likewise, subtracting the sum of the values of the border-top, border-bottom, padding-top, and padding-bottom properties from the value of the height property equals the height of the parent object's content box.

Box Model Example

The example in this section shows how identical HTML elements render differently when you use the !DOCTYPE declaration in your document to switch on standards-compliant mode with Internet Explorer 6 or later.

The DIV element in the following HTML snippet has a width and height of 200 pixels and a border-width of 50 pixels. When you click the button following the snippet, a document with two IFRAME elements is launched. The document specified by the IFRAME element on the left contains a !DOCTYPE declaration that switches Internet Explorer 6 or later into standards-compliant mode. The document specified by the IFRAME element on the right contains a !DOCTYPE declaration that does not switch on standards-compliant mode. The IFRAME element on the right also shows how the DIV element renders in earlier versions of Internet Explorer.

<div style="width:200px; height:200px; 
  border-width:50px; border-style:solid">
    Hi kids. Daddy will be home soon. I love you both!
</div>

Show me the example.

TABLE Elements

With earlier versions of Internet Explorer, CSS1 box-model semantics are used to calculate the width property of TD and TH elements in auto-layout tables, but are not used to calculate the height property of these elements. Fixed-layout tables do not use CSS1 semantics in earlier versions of Internet Explorer.

Note   Auto-layout tables are the default. To create a fixed-layout table, set the table-layout property of a TABLE element to
fixed
. The advantage of fixed-layout tables is that they render faster than auto-layout tables.

IMG Elements

CSS1 box-model semantics are also used with earlier versions of Internet Explorer to calculate the width and height properties of IMG elements. However, padding does not apply to IMG elements in earlier versions of Internet Explorer.

Who Moved My Canvas?

This section describes the difference between how the BODY and HTML elements render when the !DOCTYPE declaration switches on standards-compliant mode with Internet Explorer 6 or later.

In earlier versions of Internet Explorer, the BODY element represents the canvas—the entire surface onto which a document's content can be rendered. The size of the BODY element cannot be changed and equals the size of the window. Margins you set on this element are rendered inside the border and scroll bars of the element.

As of Internet Explorer 6, when you use the !DOCTYPE declaration to switch on standards-compliant mode, the BODY element can obtain its size from its content, or you can set its size explicitly—like a DIV object, for example. In standards-compliant mode, the HTML element represents the canvas.

When you switch on standards-compliant mode, the HTML element also becomes the positioning container for positioned elements that don't have a positioned parent. When standards-compliant mode is switched off, as with earlier versions of Internet Explorer, an absolutely positioned element is positioned relative to the BODY when there is no positioned parent. When standards-compliant mode is switched off, as with earlier versions of Internet Explorer, the BODY element represents the canvas.

Scroll Bars

The SCROLL attribute sets or retrieves a value that indicates whether scroll bars on the element are turned on. With Internet Explorer 6 or later, when you use the !DOCTYPE declaration to switch on standards-compliant mode, this attribute applies to the HTML element. When standards-compliant mode is switched off, as with earlier versions of Internet Explorer, this attribute applies to the BODY element, not the HTML element.

Note   The overflow, overflow-x and overflow-y attributes, which you can use to manage content that exceeds the size of its container, apply to the HTML element when standards-compliant mode is switched on.

Separate Backgrounds

You can specify separate background properties for the HTML and BODY elements. When standards-compliant mode is switched on, both backgrounds render clearly. This helps address a common problem—the background property is frequently defined on the BODY element, but the BODY has default margins, so only a narrow band shows up around the content of the BODY element.

The following example shows how identical HTML elements render differently when you use the !DOCTYPE declaration in your document to switch on standards-compliant mode with Internet Explorer 6 or later. The HTML element has a red background, and the BODY element has a specified height and width. You can see the effect of these properties only when standards-compliant mode is switched on. When standards-compliant mode is not switched on, the BODY element fills the window, which prevents you from seeing the background of the HTML element. When you click the button following the snippet, a document with two IFRAME elements is launched. The document specified by the IFRAME element on the left contains a !DOCTYPE declaration that switches on standards-compliant mode with Internet Explorer 6 or later. The document specified by the IFRAME element on the right contains a !DOCTYPE declaration that does not switch on standards-compliant mode. The IFRAME element on the right also shows how the DIV element renders in earlier versions of Internet Explorer.

<html style="background:red">
  <head>
    <title>Canvas Comparison</title>
  </head>
  <body style="background:blue; width:200px; height:150px">
    <div style="background:yellow">Who moved my canvas?</div>
  </body>
</html>
Note   When standards-compliant mode is switched on, if there is no background property specified for the HTML element, the background of the BODY element becomes the background of the HTML element. This complies with CSS2.

Additional Properties

This section describes two CSS properties that are available with Internet Explorer 6 or later —min-height and word-spacing.

The min-height Property

The min-height property sets or retrieves a value that indicates the minimum height of an element. With Internet Explorer 6, this property applies only to TD, TH, and TR elements in fixed-layout tables. You can use this property whether or not the !DOCTYPE declaration in your document switches on standards-compliant mode.

An element's height is set to auto by default. With the default setting, the height of an element resizes dynamically. You can use the min-height property to specify the minimum height of the cells or rows in fixed-layout tables.

The following snippet shows you how to set the min-height property declaratively. The first row of the fixed-layout table has a minimum height of 100 pixels.

<table style="table-layout:fixed">
  <tr style="min-height:100px">
    <th>Row 1, Cell 1</th>
    <th>Row 1, Cell 2</th>
  </tr>
  <tr>
    <td>Row 2, Cell 1</td>
    <td>Row 2, Cell 2</td>
  </tr>
</table>

The word-spacing Property

The word-spacing property is available on the Macintosh, beginning with Internet Explorer 4.01. It is available on Microsoft® Win32® beginning with Internet Explorer 6. This property sets or retrieves the amount of additional space between the words in an element. It adds a specified amount of spacing after each word, where a word is defined as any opportunity Internet Explorer might use to break the line—such as a space character or hyphen. You can set this property on any text container.

More Value for Your Property

This section lists possible values supported by Internet Explorer 6 or later that earlier versions of Internet Explorer do not support.

The auto Value of the margin and width Properties

The auto value of the margin and width properties specifies which of these properties to adjust when an element's width is over-constrained—that is, when the style rules overlap or are in conflict. You can use this value with Internet Explorer 6 or later when the !DOCTYPE declaration in your document switches on standards-compliant mode.

The horizontal position and width of a nonfloating, block-level element is determined by the element's margin, border, padding, and width properties. For any such element, the sum of the values of these properties (left and right) equals the width of the block element that contains it; width is inherited from the containing block.

You cannot change the width of the containing block by changing the values of the margin, border, padding, or width properties on the element within it. When you specify a value for one or more of these properties on an element, adjustments might have to be made to the other properties so that the total width of the element does not exceed the width of the container. The width might be over-constrained.

According to CSS1, margin and width values might be adjusted; border and padding values might not. Only the margin and width properties can be auto. If the specified value of the width property causes the element's width to be over-constrained, one of the margin properties might be adjusted, and if one or more of the margin properties causes the width of the element to be over-constrained, the width property might be adjusted.

The following rules decide which property to adjust when an element's width is over-constrained.

  • If the value of the direction property is ltr, the specified value of margin-right is ignored and the value is adjusted. If the value of direction is rtl, the margin-left property is adjusted instead.
  • If there is exactly one property with a value of auto, it is the property that is adjusted.
  • If width is set to auto, any other auto values become 0 and width follows from the resulting equality.
  • If both margin-left and margin-right are auto, their computed values are equal.

Auto Example

The following example shows how identical elements render differently when you use the !DOCTYPE declaration in your document to switch on standards-compliant mode with Internet Explorer 6 or later.

The first three DIV elements in the following HTML snippet render the same whether or not standards-compliant mode is switched on. The width and margin properties of the first DIV element are not specified, so its width is 100%, and it has no left or right margins. The width and margin-left properties of the second DIV element are specified, so the margin-right property is adjusted. The width property of the third DIV element is specified and its margin-right property is set to auto, so its margin-right property is also adjusted.

The fourth and fifth DIV elements have a specified width property, and one or more of their margin properties set to auto. You can see the effect of these properties only when standards-compliant mode is switched on. When standards-compliant mode is not switched on, the DIV elements render as if their margin-left properties are set to 0px, and/or their margin-right properties are set to auto.

When you click the button following the snippet, a document with two IFRAME elements is launched. The document specified by the IFRAME element on the left contains a !DOCTYPE declaration that switches Internet Explorer 6 or later into standards-compliant mode. The document specified by the IFRAME element on the right contains a !DOCTYPE declaration that does not switch on standards-compliant mode. The IFRAME element on the right also shows how the DIV element renders in earlier versions of Internet Explorer.

<body>
  <div style=""></div>
  <div style="width:50%; margin-left:0px"></div>
  <div style="width:50%; margin-right:auto"></div>
  <div style="width:50%; margin-left:auto"></div>
  <div style="width:50%; margin-left:auto; margin-right:auto"></div>
</body>

The list-item Value of the display Property

The display property enables you to control the basic shape or type of elements and whether the elements are rendered. The list-item value of the display property enables you to turn any element into a list item, a block-level element with a list marker. An element with its display property set to list-item supports the same CSS properties as an LI element—that is, in addition to the normal properties applicable to a block element, the following properties are also supported: list-style, list-style-type, list-style-image, and list-style-position.

The numbering semantics are different for LI elements than for other block elements with their display property set to list-item. LI elements obtain their index from their closest containing OL or UL element. Other block elements obtain their index from the children collection of their parent. Support for the list-item value of the display property does not change indexing for LI elements.

This value is available whether or not standards-compliant mode is switched on.

The pre Value of the white-space Property

The white-space property enables you to control white space and line breaks in an element. With Internet Explorer 6 or later, when you use the !DOCTYPE declaration to switch on standards-compliant mode, the pre value causes white space and line breaks in the source to be preserved. Line break and TAB characters ('\n' and '\t') in the source are also preserved. Successive white-space characters are not collapsed. This value causes the content in an object to lay out very much like the PRE element. This value affects not only the display of content, but also the content accessed through the W3C Document Object Model (DOM).

When standards-compliant mode is switched off, you can retrieve this value, but it does not affect rendering. It functions like the normal value.

Note   When you switch on standards-compliant mode, the white-space property applies only to block-level elements, such as a DIV element. When standards-compliant mode is not switched on, and with Internet Explorer 5.5, this property applies to all visible elements.

Stricter Style Sheet Parsing

This section lists changes to the way style sheets are parsed with Internet Explorer 6 or later.

When you use the !DOCTYPE declaration to switch on standards-compliant mode, Internet Explorer 6 or later ignores style sheet declarations that do not comply with CSS1. Earlier versions of Internet Explorer permit you to use certain invalid declarations, such as leaving out the leading '#' sign at the beginning of a hexadecimal RGB value.

Comments in Style Sheets

According to CSS1, you can use textual comments in your style sheets that are similar to the comments used in the C programming language. C language comments begin with "/*" and end with "*/." With earlier versions of Internet Explorer, you can use either C language comments or HTML comments in your style sheets. HTML comments begin with "<!--" and end with "-->."

The following example shows the difference between C language comments and HTML comments.

/* Use C language comment blocks like this in your style sheets. */
<!-- Do not use HTML comments like this in your style sheets. -->

With one exception, only C language comments are permitted with Internet Explorer 6 or later when you use the !DOCTYPE declaration in your document to switch on standards-compliant mode. The exception is that you can enclose the style sheet rules in an HTML comment. Style sheets can be enclosed within an HTML comment block so that downlevel browsers do not display the text in the style sheet. The following example demonstrates the only acceptable use of HTML comments inside an embedded style sheet.

<style>
<!--

  /* begin rules */
  H1.blue  { background-color:blue }
  .
  .
  .
  /* end rules */
  
-->
</style>

Unrecognized Tokens in Shorthand Properties

According to CSS1, when there is an unrecognized token in a shorthand property, the entire shorthand property setting is ignored. For example, "text-decoration: underline cross-out" is ignored because "cross-out" is not a recognized value for the text-decoration property. The text is not even underlined.

With earlier versions of Internet Explorer, the declaration is parsed up to the first unrecognized value. So "text-decoration: underline cross-out overline" causes the text to be underlined, but not overlined. This affects the following properties: font, background, background-position, text-decoration, margin, padding, border, border-top, border-right, border-bottom, border-left, border-color, border-width, border-style, list-style-image, list-style, clip, behavior, text-autospace, and layout-grid.

Partial Font Property Settings

According to CSS1, a font declaration must specify, at a minimum, both a font-size and a font-family. For example, "font: 14pt" is ignored because it has a font-size but no font-family. Earlier versions of Internet Explorer accept partial font settings.

Missing '#' Character for RGB Colors

According to CSS1, colors specified with hexadecimal RGB values must have a leading '#' character. Values like "FFFFFF" are ignored, not treated the same as "#FFFFFF" (also known as white), as with earlier versions of Internet Explorer. This affects all properties that accept a color value.

Missing Unit Type Identifiers Treated as Pixel Values

According to CSS1, length values must specify a unit type identifier, such as cm, mm, in, pt, pc, or px. Values without unit type identifiers and values with white space between the number and the unit type identifier are ignored. Earlier versions of Internet Explorer treat numbers without any unit type identifier as pixel units—as if "px" were appended to the string.

In the following example, both properties are ignored when the !DOCTYPE declaration switches on standards-compliant mode. The first property is ignored because there is no unit type identifier present. The second property is ignored because there is white space between the number and the unit type identifier. Earlier versions of Internet Explorer treat the first property as if "px" were appended to the number. The white space between the number and the unit type identifier in the second property are ignored by earlier versions of Internet Explorer.

DIV.Rachel { width: 817; height: 11 cm; }
Note   There is one exception to this rule. The line-height explicitly accepts unitless numbers and treats them in a manner similar to a percentage setting. For example,
"line-height: 2"
is similar to
"line-height: 200%,"
differing only in how the number inherits.

Quoted Keywords

According to CSS1, keyword tokens, like named colors such as "red," or known property values, such as "small-caps," cannot be quoted in style sheets. In the following example, both properties are ignored. Earlier versions of Internet Explorer ignore the quotation marks and apply the keyword tokens.

DIV.George { color: "red"; font-variant: "small-caps";}
Note   Scripting languages still require quotation marks around strings.

Beginning CLASS and ID Values with a Digit

According to CSS1, the values of CLASS or ID attributes cannot begin with a digit (0-9). Earlier versions of Internet Explorer permit you to begin these values with a digit.

Case-sensitive CLASS and ID Values

According to HTML 4.0, the values of CLASS and ID attributes are case-sensitive.

But Wait, There Are More New Features

When you use the !DOCTYPE declaration to switch on standards-compliant mode with Internet Explorer 6 or later, some features function differently than they did with earlier versions of Internet Explorer. This section lists those features.

The small-caps Value of the font-variant Property

The small-caps value of the font-variant property produces a "small-capitals" effect. All letters in the element are uppercase, and letters that were lowercase in the original text are smaller than those that were originally uppercase. In earlier versions of Internet Explorer, the small-caps value applies the same font size to all of the characters in an element.

Padding on IMG Elements

Padding properties, such as padding, padding-bottom, padding-top, padding-left, and padding-right, are supported on IMG elements. Earlier versions of Internet Explorer do not support the padding properties on IMG elements.

Keyword Values of the Font-size Property

The medium value of the font-size property matches the default normal font size.

The keyword values of this property include xx-small, x-small, small, medium, large, x-large, and xx-large. With earlier versions of Internet Explorer, these values are not defined intuitively. The medium value is not the default normal font size; small is the default.

TABLE Elements Inherit Text Properties

TABLE elements inherit the value of text properties from their parents. These properties include color, font-size, font-weight, font-style, font-variant, text-decoration, text-transform, letter-spacing, and line-height. With earlier versions of Internet Explorer, for all of the text properties of TABLE elements except the font-family property, set all text properties to the settings on the BODY element.

Note   The font-family property of TABLE elements is inherited in Internet Explorer 3 and later.

Width and Height of Inline Elements

Inline elements such as SPAN, B, and I do not support width or height properties. If you want to set the width or height property of an inline element with standards-compliant mode switched on, you must set the display property of the element to inline-block.

Character Escaping

According to CSS1, you can use the backslash (\) as an escape character. This removes any special meaning from the character that follows it. For example, you can escape the quote character like this:

STYLE="font-family:'Rachel\'s font'"

You can also use hex values to escape Unicode characters. For example, "\0009" is the escape for a tab character.

The Way It Was

This section helps you make your applications render correctly on all versions of Internet Explorer.

When Internet Explorer 6 or later is not in standards-compliant mode, it is in compatibility mode. If you developed applications for earlier versions of Internet Explorer and you want the applications to render the same way on Internet Explorer 6 or later, make sure the !DOCTYPE declaration doesn't switch on standards-compliant mode.

In standards-compliant mode, compatibility with other versions of Internet Explorer is not guaranteed. When standards-compliant mode is switched on, the rendering behavior of documents might differ in future versions of Internet Explorer. You should not use this mode for content that is fixed in nature, such as content that is stored on a CD.

If necessary, scripts can use the compatMode property of the document object to determine which mode the browser is running in, and respond accordingly.

Additional Information

CSS1 Test Suite

Compatibility in Internet Explorer 5.5

Measuring Element Dimension and Location

Positioning

 

Lance Silver is a Programmer/Writer on the Windows Client SDK team. When he's not tormenting editors, developers, testers, or program managers, he takes his kids, Rachel and George, fishing for salmon and steelhead on one of the Northwest's scenic rivers. (Everyone wishes he spent more time fishing.)


  
Show:
© 2014 Microsoft