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.

Label	Definition	URL present	URL not present
No !DOCTYPE present		Off	Off
HTML (No Version Present)		Off	Off
HTML 2.0		Off	Off
HTML 3.0		Off	Off
HTML 3.2		Off	Off
HTML 4.0	No Definition Present	On	On
HTML 4.0	Frameset	On	Off
HTML 4.0	Transitional	On	Off
HTML 4.0	Strict	On	On
XHTML		On	On
XML		On	On
Unrecognized !DOCTYPE		On	On

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

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.