Support for Cascading Style Sheets, Level 1
in
Microsoft Internet Explorer 3.0,
Win32 version
Purpose
The information on this page is intended as reference material for persons authoring pages with Cascading Style Sheets with the intention of making them viewable in Microsoft Internet Explorer 3.0. This page addresses the Windows 95/NT version of Internet Explorer. For similar information which addresses the Macintosh version, see Eric Meyer's page.
Notes on this revision
This is the first revision I've made to this page since I totally overhauled it with the new format. Here is a summary of the changes since the last revision:
- Section 3 ("The Cascade") has been expanded slightly.
- Section 5.1.1 (the
font-family
property) incorrectly stated that Internet Explorer does not support the generic family names cursive and fantasy. Internet Explorer does in fact support these.
- Section 5.1.1 (the
font-family
property) has been expanded slightly to further address parsing issues with alternate font lists.
- The description of Internet Explorer's problems with the
background
property and linked style sheets has been expanded.(5.2.7)
- Section 6.3 ("Color Units") incorrectly stated that Internet Explorer did not support the 3-digit hexadecimal format for specifying color. Internet Explorer does in fact support this.
This document attempts to reflect the state of the most recent release version of Internet Explorer, which, as of this revision, is version 3.02a. Its entire contents may not be applicable to previous versions of Internet Explorer 3.0.
Acknowledgements
Thanks to these persons for contributing ideas and information to this page.
- 1 Basic concepts
- 2 Pseudo-classes and pseudo-elements
- 3 The cascade
- 4 Formatting model
- 5 Properties
- 5.1 Font properties
- 5.2 Color and background properties
- 5.3 Text properties
- 5.4 Box properties
- 5.5 Classification properties
- 6 Units
- 6.1 Length units
- 6.2 Percentage units
- 6.3 Color units
- 6.4 URL
Lack of support for a number of CSS features limits the amount of "cascading" required of Internet Explorer.
- Importing style sheets with
@import
is not supported.
- The special attribute
important
is not supported.
- Internet Explorer has no documented means of specifying a user style sheet.
In addition to these deficiencies, Internet Explorer 3.0 seems altogether incapable of cascading. For instance, it will not combine (and duly cascade) styles included in either multiple STYLE
blocks, or a combination of a linked style sheet and one or more STYLE
blocks.
Internet Explorer 3.01 (and presumably any subsequent versions of Internet Explorer 3.0) uses a simplified version of the CSS1 formatting model which lacks borders and padding. Further departures from the CSS1 formatting model (as they relate to specific properties) are noted in sections 5.2.7, 5.3.8, and 5.4.5.
In versions of Internet Explorer 3.0 prior to version 3.01, margins are not inherited. In those versions, margins values are always interpreted relative to the canvas, and not relative to any margin for any parent element.
Supported: | yes |
Supported values: | <family-name> | serif | sans-serif | monospace | cursive | fantasy |
Unsupported values: | [[<family-name> | <generic-family>],]* [<family-name> | <generic-family>] |
Unsupported syntax: |
|
Rendering errors: | none |
Supported: | yes |
Supported Values: | normal | italic |
Unsupported Values: | oblique |
Unsupported syntax: | none |
Rendering errors: | none |
Supported: | no |
Supported Values: | n/a |
Unsupported Values: | n/a |
Unsupported syntax: | n/a |
Rendering errors: | n/a |
Supported: | yes |
Supported Values: | normal | bold |
Unsupported Values: | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 |
Unsupported syntax: | none |
Rendering errors: | none |
Supported: | yes |
Supported Values: | xx-small | x-small | small | medium | large | x-large | xx-large | <length> | <percentage> |
Unsupported Values: | smaller | larger |
Unsupported syntax: | none |
Rendering errors: | Percentage values are not applied correctly. Percentage should be based exclusively on the font size of the parent element. Internet Explorer calculates size based on the percentage of whatever the default font size for the element is. A couple of examples:
-
Given the style:
H1 { font-size: 100% }
Text in the H1 element should be the same size as the BODY text. However, Internet Explorer interprets this as 100% of the default size of the H1 element; or, no change at all.
-
Given the style:
SUP { font-size: 70% }
Text in the SUP element should be 70% of the size of text in the parent element. However, Internet Explorer scales the text in the SUP element down by default, based on the parent element. Internet Explorer applies this style to size text in the SUP element 70% of the already smaller size.
|
Supported: | yes |
Supported Values: | <color> |
Unsupported Values: | none |
Unsupported syntax: | none |
Rendering errors: | none |
Supported: | no |
Supported Values*: | <color> |
Unsupported Values*: | none |
Unsupported syntax: | n/a |
Rendering errors: | n/a |
* Included as it pertains to the background
property (5.2.7).
Supported: | no |
Supported Values*: | <URL> |
Unsupported Values*: | none |
Unsupported syntax: | n/a |
Rendering errors: | n/a |
* Included as it pertains to the background
property (5.2.7).
Supported: | no |
Supported Values*: | repeat | no-repeat | repeat-x | repeat-y |
Unsupported Values*: | none |
Unsupported syntax: | n/a |
Rendering errors: | n/a |
* Included as it pertains to the background
property (5.2.7).
Supported: | no |
Supported Values*: | scroll | fixed |
Unsupported Values*: | none |
Unsupported syntax: | n/a |
Rendering errors: | n/a |
* Included as it pertains to the background
property (5.2.7).
Supported: | no |
Supported Values*: | [top | center | bottom | <percentage>] || [left | center | right | <percentage>] |
Unsupported Values*: | <length> || <length> |
Unsupported syntax: | n/a |
Rendering errors: | n/a |
* Included as it pertains to the background
property (5.2.7).
Supported: | yes |
Supported Values: | <background-color> || <background-image> || <background-repeat> || <background-attachment> || <background-position> |
Unsupported Values: | see section 5.2.6 |
Unsupported syntax: | This property is not applied to the BODY element when used from a linked style sheet. |
Rendering errors: |
-
Per the CSS1 specification, the default background for an element should be transparent, allowing the background of the parent element to "show through." This is not applied consistently in Internet Explorer: while all elements appear to show the background of the BODY element by default, this is not applied to parent-child relationships of other elements in the document. For example, given the styles:
DIV { background: black } H1 { color: white }
... And the HTML code:
<DIV> <H1>peas porridge hot</H1> </DIV>
The text peas porridge hot should be white on a black background.
- Backgrounds are not applied correctly to elements, save the
BODY , TD , and TH elements. Per the CSS1 specification, an element's background should be applied to the entire "box" of the element, plus any padding and border (unless the border has its own color). Internet Explorer applies the background only behind text.
- Values for background position are applied only to the
BODY element.
- Background images aligned along the bottom align with the bottom of text on the page, rather than the bottom of the browser window.
- Background images aligned along the right of the page align with the rightmost margin of text on the page, rather than the right side of the browser window.
|
Supported: | no |
Supported Values: | n/a |
Unsupported Values: | n/a |
Unsupported syntax: | n/a |
Rendering errors: | n/a |
Supported: | no |
Supported Values: | n/a |
Unsupported Values: | n/a |
Unsupported syntax: | n/a |
Rendering errors: | n/a |
Supported: | yes |
Supported Values: | none | underline | line-through |
Unsupported Values: | overline | blink | <combinations of two or more values> |
Unsupported syntax: | n/a |
Rendering errors: | none |
Supported: | no |
Supported Values: | n/a |
Unsupported Values: | n/a |
Unsupported syntax: | n/a |
Rendering errors: | n/a |
Supported: | no |
Supported Values: | n/a |
Unsupported Values: | n/a |
Unsupported syntax: | n/a |
Rendering errors: | n/a |
Supported: | yes |
Supported Values: | left | right | center |
Unsupported Values: | justify |
Unsupported syntax: | none |
Rendering errors: | none |
Supported: | yes |
Supported Values: | <length> | <percentage> |
Unsupported Values: | none |
Unsupported syntax: | none |
Rendering errors: | none |
Supported: | yes |
Supported Values: | <length> | <percentage> |
Unsupported Values: | normal | <number> |
Unsupported syntax: | n/a |
Rendering errors: |
- Values are incorrectly applied to the top and bottom of a text block.
- Negative length values are rendered, rather than ignored; CSS1 does not allow negative values for this property.
|
Supported: | yes |
Supported Values: | <length> | <percentage> |
Unsupported Values: | auto |
Unsupported syntax: | none |
Rendering errors: | see section 5.4.5 |
Supported: | yes |
Supported Values: | <length> | <percentage> |
Unsupported Values: | auto |
Unsupported syntax: | none |
Rendering errors: | see section 5.4.5 |
Supported: | yes |
Supported Values: | <length> | <percentage> |
Unsupported Values: | auto |
Unsupported syntax: | none |
Rendering errors: | none |
Supported: | yes |
Supported Values: | <length> | <percentage> |
Unsupported Values: | auto |
Unsupported syntax: | none |
Rendering errors: | none |
Supported: | no |
Supported Values: | n/a |
Unsupported Values: | n/a |
Unsupported syntax: | n/a |
Rendering errors: | n/a |
Supported: | no |
Supported Values: | n/a |
Unsupported Values: | n/a |
Unsupported syntax: | n/a |
Rendering errors: | n/a |
Supported: | no |
Supported Values: | n/a |
Unsupported Values: | n/a |
Unsupported syntax: | n/a |
Rendering errors: | n/a |
Supported: | no |
Supported Values: | n/a |
Unsupported Values: | n/a |
Unsupported syntax: | n/a |
Rendering errors: | n/a |
Supported: | no |
Supported Values: | n/a |
Unsupported Values: | n/a |
Unsupported syntax: | n/a |
Rendering errors: | n/a |
Supported: | no |
Supported Values: | n/a |
Unsupported Values: | n/a |
Unsupported syntax: | n/a |
Rendering errors: | n/a |
Supported: | no |
Supported Values: | n/a |
Unsupported Values: | n/a |
Unsupported syntax: | n/a |
Rendering errors: | n/a |
Supported: | no |
Supported Values: | n/a |
Unsupported Values: | n/a |
Unsupported syntax: | n/a |
Rendering errors: | n/a |
Supported: | no |
Supported Values: | n/a |
Unsupported Values: | n/a |
Unsupported syntax: | n/a |
Rendering errors: | n/a |
Supported: | no |
Supported Values: | n/a |
Unsupported Values: | n/a |
Unsupported syntax: | n/a |
Rendering errors: | n/a |
Supported: | no |
Supported Values: | n/a |
Unsupported Values: | n/a |
Unsupported syntax: | n/a |
Rendering errors: | n/a |
Supported: | no |
Supported Values: | n/a |
Unsupported Values: | n/a |
Unsupported syntax: | n/a |
Rendering errors: | n/a |
Supported: | no |
Supported Values: | n/a |
Unsupported Values: | n/a |
Unsupported syntax: | n/a |
Rendering errors: | n/a |
Supported: | no |
Supported Values: | n/a |
Unsupported Values: | n/a |
Unsupported syntax: | n/a |
Rendering errors: | n/a |
Supported: | no |
Supported Values: | n/a |
Unsupported Values: | n/a |
Unsupported syntax: | n/a |
Rendering errors: | n/a |
Supported: | no |
Supported Values: | n/a |
Unsupported Values: | n/a |
Unsupported syntax: | n/a |
Rendering errors: | n/a |
Supported: | no |
Supported Values: | n/a |
Unsupported Values: | n/a |
Unsupported syntax: | n/a |
Rendering errors: | n/a |
Supported: | no |
Supported Values: | n/a |
Unsupported Values: | n/a |
Unsupported syntax: | n/a |
Rendering errors: | n/a |
Supported: | no |
Supported Values: | n/a |
Unsupported Values: | n/a |
Unsupported syntax: | n/a |
Rendering errors: | n/a |
Supported: | no |
Supported Values: | n/a |
Unsupported Values: | n/a |
Unsupported syntax: | n/a |
Rendering errors: | n/a |
Supported: | no |
Supported Values: | n/a |
Unsupported Values: | n/a |
Unsupported syntax: | n/a |
Rendering errors: | n/a |
Supported: | no |
Supported Values: | n/a |
Unsupported Values: | n/a |
Unsupported syntax: | n/a |
Rendering errors: | n/a |
Supported: | no |
Supported Values: | n/a |
Unsupported Values: | n/a |
Unsupported syntax: | n/a |
Rendering errors: | n/a |
Supported: | no |
Supported Values: | n/a |
Unsupported Values: | n/a |
Unsupported syntax: | n/a |
Rendering errors: | n/a |
Supported: | no |
Supported Values: | n/a |
Unsupported Values: | n/a |
Unsupported syntax: | n/a |
Rendering errors: | n/a |
Supported: | no |
Supported Values: | n/a |
Unsupported Values: | n/a |
Unsupported syntax: | n/a |
Rendering errors: | n/a |
Supported: | no |
Supported Values: | n/a |
Unsupported Values: | n/a |
Unsupported syntax: | n/a |
Rendering errors: | n/a |
Supported units: |
|
Unsupported units: |
|
Percentage units are supported as described in the CSS1 specification.
Supported notation: |
- <six-digit RGB hexadecimal>
- <three-digit RGB hexadecimal>
|
Unsupported notation: |
- <functional, using integers>
- <functional, using percent>
|
Internet Explorer supports the functional notation for URLs described in the CSS1 specification, with the following exceptions:
- Full URLs (of the form http://www.foobar.com/image.gif) are not supported, though relative URLs work fine.
- Use of the optional single or double quotes to enclose the URL string is not supported.