Tutorials Bugs Masterclass Free stuff Test pages Proposals

RichInStyle.com bug guide - Internet Explorer 3

One of the biggest problems with style sheets is that all well-designed style sheets that do not make concessions to Internet Explorer 3 are literally unreadable in it. However, provided you know the problems it is possible to convert them into style sheets that work perfectly.

This page not only presents an exhaustive list of Internet Explorer 3 bugs but also gives a bug-by-bug guide on how to avoid them and, if possible, work around them - it is useless knowing the bugs but not knowing how to fix them. This page only covers the PC version of IE 3; however, you will find that if you serve a style sheet that works on IE 3.01 on the PC to Mac users, it will work perfectly.

If you want to know the extent of the problem, about 3% of all web users are using IE 3.

I urge you to use RichInStyle.com's bug-avoidance techniques, so that the fixes made for IE 3 don't damage other browsers.


These have been sorted into categories. This should make it easier for to you find whether the property that you want to use works.

The idea behind the reorganisation is to allow you to see at a glance all the bugs for the area of CSS that you are trying to use.

While it should be easily apparent what area you are using, and therefore which section you should read, everyone uses Section A and Section B, so therefore everyone should read these sections.

Bugs by type

Topics to be found in this part of the bug guide

Part 0 - Core issues - everyone must read

Section A - Bugs relating to embedding, linking and parsing style sheets (36 bugs).

Section B - Bugs with units (2 bugs).

Part 1 - Topic related issues - must read if you use the section involved

Section C - Font bugs (25 bugs).

Section D - Text bugs (14 bugs).

Topics to be found in part 2 of this bug guide

Section E - Color and background bugs (25 bugs).

Section F - Margin bugs (13 bugs)

Section G - Other bugs - unsupported properties (25 bugs)

Part 2 - Element related issues - must read if you use the elements involved

Section H - Form bugs (5 bugs)

Section I - Table bugs (12 bugs)

Section J - List item bugs (2 bugs)

Section K - Horizontal rule bugs (1 bug)

Part 3 - Error correction bugs - bugs, but inconsequential unless you produce invalid style sheets

Section J - Error correction bugs (37 bugs)

Total bugs = 36 + 2 + 25 + 14 + 25 + 13 + 25 + 5 + 12 + 2 + 1 + 37 = 197.

Part 0 - Core Issues - MUST READ

Section A - Bugs relating to embedding, linking and parsing style sheets

Attaching style to pages
Bug 1: multiple STYLE elements destroyed

If there are two or more <STYLE> blocks in a document, all but the last one is ignored.

Bug 2: STYLE destroyed when with LINK

If there are both LINKed style sheets and embedded ones in a document, the embedded ones are ignored, except for the background declaration on BODY. This might sound unbelievable, but it is true - if you have BODY {background: blue; color: white; font-size: 20px, etc.} in an embedded style sheet, it will all be ignored except for the BODY background declaration when the page is linked to a LINKed style sheet.

[This is probably because it does not support backgrounds in external style sheets so there is no question of not being able to override.]

Bug 3: multiple linked style sheets destroyed

If there are two or more LINKed style sheets in a document, all but the last one will be ignored.

Bug 4: absolute urls destroy

If a style sheets are linked via an absolute url (e.g., http://www.whatever.com/whatever), IE 3 will not read the style sheet but instead will launch it with whatever program that style sheets are asssociated with.

media attribute
Bug 5: destroyed

IE3 uses all style sheets regardless of media declarations. Thus put the style sheet intended for the screen last to get IE 3 to correctly honor it (since it ignores all but the last LINKed style sheet).

Alternate style sheets
Bug 6: unsupported

IE 3 does not support alternate style sheets.

Bug 7: @charset and @import destroyed

According to the CSS 1 specification, all unknown @rules should be ignored. This is something IE 3 fails to do.

The two one line @rules (@import and @charset) are thought by IE 3 to be selectors, and so it ignores everything following an @import (or other @rule) up to after the next {}. To fix this problem, just add a dummy declaration:

@import url(css.css);
.dummydeclaration {font: 16px Times} /* Will be ignored by IE 3 */

Bug 8: @media destroyed

@media (and any future things that contain '}' (all other characters are non-problematic)) is parsed in the following manner: ignore the first ruleset of the block; apply all the rest of them.

@media handheld {
P {color: white;
background: black}
BODY {color: red;
background: green}

This example would cause the first ruleset (P) to be ignored (correctly), but the second to be applied to all media. In addition, the next ruleset following the @block would be ignored, since it would intepret the closing } of the @ block as part of the next selector.

Thus @media MUST be hidden from IE 3 (or only have one ruleset per @media, and follow each @media with a dummy declaration).

style attribute
Bug 9: wrong specificity

IE 3 incorrectly gives the style attribute infinite specificity instead of specificity of 100. Although this is incorrect, it is better, and the CSS spec should be changed accordingly.

User style sheets
Bug 10: HTML background attributes placed as start of user style sheet

IE 3 doesn't support user style sheets very well. Rather than treating HTML formatting attributes as at the start of the author style sheet (this is significant because author declarations override user ones), it places them at the start of the user style sheet, thereby allowing user style sheets to override them.

Bug 11: unsupported

IE 3 does not support the HTTP-EQUIV link header for linking style sheets. However, this is of little consequence because it is a pointless way to link to style sheets - just use the LINK element instead.

Applying style to pages
Bug 12: treated as case-insensitive

It treats classes as case-insensitive, whereas the HTML specification states that they are case-sensitive.

Bug 13: will be ignored if they contain hyphens

IE 3 will ignore classes that contain hyphens.

Bug 14: Ç not permitted in classes

IE 3 will ignore classes that include Ç, even though this is valid as a non-ASCII character.

Bug 15: treated as case insensitive

It treats ids as case insensitive, whereas the HTML specification states that they are case sensitive.

Bug 16: will be ignored if they contain hyphens

IE 3 will ignore IDs that contain hyphens.

Bug 17: must omit element name and class

IDs only work if the simple selector doesn't include element_name or class. E.g., P#id and .class#id don't work, but #id does.

Contextual selectors
Bug 18: unless each simple selector except the subject includes element_name, the page is destroyed

Contextual selectors where any part of the selector except the subject omits the element name (e.g., .contents P where P is the subject (the element that is being selected)) destroy the whole page - if the element_name is omitted from a simple selector, it is ignored. Thus .class P {color: red} would be treated as P {color: red}. On the other hand, DIV.class .class {color: red} would be correctly treated because all of the simple selectors (except for the subject, which IE 3 does not require to include this) in the selector include element_name.

Note that this bug means that contextual selectors using IDs will never work, because in IE 3 IDs only work if the element_name is omitted.

Pseudo-classes and pseudo-elements
Bug 19: all except for :link, :visited and :active destroyed

IE 3 ignores (i.e., treats as though they weren't there) all unknown pseudo-classes and pseudo-elements, so remove them from any style sheet used by IE 3 users. (It is very easy to mark up the first-letter separately anyway). Other bugs mean that * will be applied if appropriate, so P:hover is applied as P, and :focus is applied as *. See the explanation in part 2 of this bug guide.

The destroyed pseudos are:

Thus, for example, :hover {color: red; background: black} is applied as * {color: red; background: black}


:visited is only applied to FRAMESET documents where the document has been visited since the last reload, and to local hrefs (i.e., <A name="#">). This is not necessarily a bug, since the spec does not fully define :visited, and as such it is not listed as one. It is nonetheless worth noting.

Bug 20: :link

A:link and :link are applied as matching both visited and unvisited links (as A:link, A:visited (not :link, :visited - always A:link - this is significant for specificity)). However, you can avoid the bugs by specifying all the properties on A:visited that you do on A:link, e.g., if you have A:link {color: red; background: green}, you should specify values for these properties on A:visited as well.

Bug 21: font-size and :visited

You should not apply font-size to :visited links, since subsequent content is not reflowed to compensate and as a result, content is obscured and overlapped with. This also means that you probably shouldn't apply font-size to A:link either, since it will be applied to A:visited (this is explained in the previous bug).

Bug 22: pseudo-classes in combination with classes destroyed or ignored

IE 3 doesn't support classes in combination with pseudo-classes (such as :link and :visited), AND buggily applies A:link.class (though not A.class:link) and A:visited.class (though not A.class:visited) as A:link and A:visited respectively. In addition, :link.class, :visited.class and :active.class are applied to *.

As a result, if you need to use classes, you should either:

  1. Omit the pseudo-class (if this is appropriate)
  2. OR: declare in the form (A).class:visited so as to avoid the IE 3 bug (by causing it to ignore it, which is preferable to having it destroy the page).
Bug 23: pseudo-classes in combination with ids ignored and possibly destroyed

IE 3 doesn't support IDs in combination with pseudo-classes, and buggily applies :link#class or :visited#class as * (though it doesn't do this to #class:link (which it ignores - if you need to use ids with pseudo-classes, use this format), A:visited#id (which it applies as A) or A:link#id (which it applies as A)), subject of course to its normal bugs, e.g., * {background: red} would if the BODY tag was omitted be applied only to individual elements, etc.

Bug 24: multiple pseudo-classes

Where multiple pseudo-classes are used (as in A:link:hover), IE 3 ignores them both. E.g., A:link:hover would be parsed as A, and :link:hover as * (see explanation in part 2 of this guide).

The way to avoid this bug is to give all your anchors a class, e.g., <A class="anchor">, and then declare .class:link:hover (or A.class:link:hover) (note, NOT :link:hover.class or :link.class:hover - the class must be the first thing in the simple selector).

Bug 25: active doesn't work

:active is ignored, which is good, since it won't cause any problems.

The universal selector
Bug 26: only useful when the selector is simple

Although IE 3 does not support the universal selector, parsing bugs mean that it does work in very limited circumstances, for example * {color: red} will work (see explanation). However, BODY * LI would be parsed as BODY LI (as an unknown combinator, as below), so the only use of it is to apply style to everything. This is useful, e.g., to avoid IE's table inheritance bugs.

Unknown combinators (> and +)
Bug 27: destroyed

When IE 3 encounters an unknown combinator (such as > (the child combinator: P > A matches A as child of P) and + (the adjacent sibling combinator: H1 + P matches a P that is sibling of H1), rather than ignoring the entire ruleset as it should (under the forward-compatible parsing rules of CSS1), it just ignores the combinator.

For example, BODY + DIV would be applied as BODY DIV, as would BODY > DIV. As a result, you must not let the adjacent sibling combinator (+) or the parent combinator (>) near IE 3, and neither should you let any future combinators near it.

Key concepts
The order sort
Bug 28: destroyed

IE 3 doesn't properly support the order sort (which states that later declarations override earlier ones). It supports order sorting within declarations but not between declarations, applying the first declaration rather than the last one - P {color: red; color: green} works, but P {color: red} P {color: green} does not.

Bug 29: destroyed

IE 3 treats inherit as 0 when specified on the margin shorthand, and also gets it wrong on color under certain circumstances.

Bug 30: destroyed

If you make an !important declaration for any property (e.g., P {color: red !important}, which specifies that all P elements should be red, even if overridden by an apparently more specific ruleset such as P.class {color: red}) except the margin properties , IE 3 will ignore the whole declaration; on the margin properties it simply ignores the !important.

Comments (/* */)
Bug 31: can't close with multiple *

If you close comments (e.g., P {color: red /* This is a comment */}) with multiple asterisks (including /***/, but not /**/), it will destroy the next ruleset.

Bug 32: not permitted after property macro

Although the CSS specification states that comments are valid anywhere between tokens, IE 3 will ignore declarations that have them immediately following the property (e.g., color/* comment */ : red).

Bug 33: not permitted inside simple_selector

IE 3 does not permit comments inside simple selectors (e.g., P./* comment */class), even though they are valid anywhere between tokens.

Bug 34: adjacent to selector, destroys ruleset and subsequent ruleset

If you include a ruleset immediately adjacent to the last simple selector of a selector, it will ignore that ruleset and the subsequent one; for example, P/* */ {color: red} would cause that ruleset to be ignored and the ruleset after it. Note that it must be immediately adjacent - if there is an intervening space, it will work fine.

Bug 35: not supported

The CSS spec allows the backslash otherwise illegal characters to be used in tokens (example: P.cl\_ass {color: red}, where the backslash is used because _ is not normally valid in identifiers). IE 3 doesn't support this.

Implied elements
Bug 36: not implied

According to the HTML specification, the opening <BODY> and <HTML> tags can be omitted, and their presence is thus implied (i.e., the element is present regardless of whether the tag is). IE 3, on the other hand, doesn't imply it. The best thing to do is just to include the tag.

Section B - Bugs with units

Bug 1: Destroyed

Internet Explorer 3 treats 1em as 1pt.

Bug 2: destroyed

Internet Explorer 3 treats 1ex as 1pt.


Example 1

BODY {font-size: 12pt}
P {line-height: 1.5em}
/* Would be interpreted as line-height: 1.5pt = unreadable */

Here, it is easy to remove the em reference, since here line-height is 1.5em, which is 1.5*P's font-size, which it will have inherited from BODY = 18pt. However, you should not, under any circumstances use points (to see why, read the article in RichInStyle.com's style sheet master class). As a result, you should either avoid font-size entirely in IE 3, or use pixels.

Example 2

DIV.indent {margin-left: 2em}
P {font-size: 1.1em}

Here, we have more of a problem. The designer has followed good design practice by not using an absolute unit so that the page appears at the size most comfortable for the reader - important for those with sight problems. However, there is nothing we can do, so we assign to BODY the font-size that we think is best. This must be specified in pixels; for example, 16px, but it could be some other number, and based on the number we decide is most appropriate we put in DIV.indent {margin-left: 32px}, etc.

Part 1 - Topic related issues - must read if you use the section involved

Section C - Font bugs

Font concepts
Line heights
Bug 1: on elements with margin-top <> 0

You must not under any circumstances set line-height on any of the following (i.e., elements that have non-zero margin-tops), since it has the effect of also setting margin-top to the specified value (which wreaks havoc, see part 2 of this bug guide):

In addition, because of inheritance, you cannot apply margin-top to DIV if DIV contains any of these elements.

Bug 2: applied wrongly

Per the CSS specification, half the line-height should be applied above and half below the line. IE 3 applies it all above the line. This shouldn't cause any major problems.

Bug 3: <number> destroyed

Line-height: 2 should result in a line-height twice the size of an element's parent with this scaling factor inherited to the element's child. In Internet Explorer 3, it is interpreted as 2 px (see part 2 for an explanation. This means you must remove line-height declarations in this format from IE 3 style sheets.

Bug 4: normal destroyed

IE 3 doesn't support normal, and interprets it as 0 (see part 2 for an explanation).

Bug 5: Images

According to the CSS specification, when the height of a replaced element (such as an image) is greater than the line-height, the height of that line is adjusted to compensate, but IE 3 doesn't apply this, so to get round this, you should avoid declaring line-height on elements that contain images (note that you can't do P.containsimage {line-height: normal}, since normal doesn't work). To a certain extent the effect of this bug is removed by the next bug:

Bug 6: applied to images

IE 3 applies line-height to images; for example, <IMG style="line-height: 20px"> makes the image's box 20-pixels high. This is useful in allowing the previous bug to be avoided.

Bug 7: non-constant multiplier used

Although IE 3 generally applies a line-height value of around 1.2, it varies about this figure according to font-size.

Bug 8: height of line boxes that contain images incorrect

IE 3 does not get the height of line boxes that contain images correct. This bug is of no consequence due to bug 5, which is far more serious.

Font families
Bug 9: cursive

Font-family: cursive applies Comic Sans MS in IE 3, which isn't a cursive font.

Bug 10: glyph matching

According to the CSS specification, where a font lacks a glyph for the character specified, a font that does include the glyph should be used instead. While IE 3 applies this for character references (such as &quot;, or &#67;), it does not do so for unreferenced characters, instead applying the glyph that is in the same position in that font as the requested glyph normally would be. Thus <SPAN style="WingDings">H should result in a H, and WingDings should not be used since it doesn't contain any H's, but not in IE 3.

This means that you should be wary of specifying fonts that lack the appropriate glyph for unescaped characters.

Bug 11: ' as quote unsupported

IE 3 doesn't support the use of single quotes ('), so change them to ". This means that if declaring a font or font-family with quotes inline (e.g., <P style="font-family: 'Comic Sans MS'">), you must use the single quote for the style attribute, and " for the font (e.g., <P style='font-family: "Comic Sans MS"'>).

Bug 12: Multiple fonts

If the browser does not have the first font in a font-family or font declaration (as in font-family: Arial, sans-serif), IE 3 will not apply any of them unless you declare the font like this: (it will also ignore every subsequent declaration in the ruleset if you specify an alternate list, so if you want to specify an alternate list, IT MUST BE IN THIS FORM):

P {font-family: genericfontfamily;
font-family: leastfavoredspecificfont;
font-family: nextleast}
/* generic font family is, e.g., serif */

Bug 13: UI fonts destroyed

IE 3 destroys UI fonts by always applying the browser-default font when they are specified; for example, font: caption would apply the browser-default font (usually Times New Roman).

Although this counts as destruction because it only causes harmful behavior, it is not one of the more damaging bugs ever.

Font variants
Bug 14: not supported

Font-variant: small-caps is not supported, but you could always use font-family with a small caps font.

Font sizes
Bug 15: % destroyed

IE 3 interprets % as relative to the default for the current <FONT size="">, except on H1-6, which have fixed sizes regardless of any <FONT size=""> tag.

On SMALL, SUP, SUB and BIG, % are multiplied by the element default % (in each case 20% larger or smaller respectively), which in turn is relative to the current <FONT size=""> so SMALL style="font-size: 80%" is interpreted as 80% of the default scaling factor (80%) = 64% of the current FONT size.

BODY {font-size: 72px;}
SMALL {font-size: 100%}
<FONT size="4">
  <SMALL>This text would be 100% of the size of SMALL text at FONT size="4", not 100% of 72px.</SMALL>. Without the font-size: 100% declaration, the text would be 80% of 72px = 57.6px.

So, to reiterate % is totally useless in IE 3, in ALL circumstances, and MUST not be used.

Bug 16: relative keywords not supported

Larger and smaller are not supported, and as such will be ignored.

Font weights
Bug 17: normal not supported

This doesn't work. However, font-weight: lighter does, so use this instead.

Bug 18: bolder unsupported

This doesn't work, so you must use bold instead.

Bug 19: <number> unsupported.

Numerical font-weights don't work.

Font styles
Bug 20: normal not supported

Font-style: normal doesn't work (i.e., you can't make I or EM normal, nor override inherited italics).

Bug 21: oblique not supported

Font-style: oblique doesn't work.

Font properties
Bug 22: quotes

After a font-family (but not font) declararation that includes quotes, everything is ignored up to the next semi-colon. This effectively means that if font-family is the last declaration in a list, it must be followed by a semi-colon. E.g.:

P {font-family: "Times New Roman"} /* Wrong - missing ; */

Bug 23: normal destroys

IE 3 will entirely ignore font: declarations that include the normal value.

Bug 24: <number> destroys

When the font: shorthand includes a font-weight declared as a number, IE 3 renders it as that number of pixels. This causes quite literally enormous problems.

Bug 25: doesn't shorthand reset unset values

The font shorthand doesn't reset all unset values to the initial value as it should. As a result, line-heigt: 400px; font: 16px Arial, which should result in 16px Arial text with line-height: normal, actually results in 16px Arial text with line-height: 400px. As a result, you should never rely on font resetting unset values, but you should set them yourself (bearing in mind the normal bug above, the fact that line-height: normal, font-weight: normal, and font-style: normal don't work, etc.).

Section D - Text bugs

Bug 1: multiple values

Declaring more than one text-decoration, e.g, text-decoration: underline line-through doesn't work. However, text-decoration: underline; text-decoration: line-through does (though it won't work in other browsers), even though it shouldn't. As a result, if using this technique, you should do something like text-decoration: underline; text-decoration: line-through; text-decoration: underline line-through, since this will work due to IE3's support of ignoring of declarations.

Bug 2: white space before end tag

Where an element that has text-decoration set has any form of white space (including line feeds) between the last character of the HTML source and the closing tag, the space will have the text-decoration applied to it.

Bug 3: inherited instead of spanned

IE 3 inherits text-decoration instead of having it inherit in the color of the parent as it should.

Bug 4: overline not supported

Overline doesn't work.

Bug 5: blink not supported

Blink doesn't work.

Bug 6: inherited to block elements

IE 3 inherits text-decoration to block elements, whereas the CSS spec states that is only inherited to inline descendants.

Bug 7: inheritance

This is only inherited to an element's first child rather than to all children as it should be. This means that instead of BODY {text-indent: 25pt} you should use P (or whatever other element) {text-indent: 25pt}

Bug 8: percentages

Percentages are relative to the width of the viewport on text-indent in IE 3, instead of the width of the containing block as they should be.

Bug 9: justify unsupported

IE 3 doesn't support text-align: justify.

  1. letter-spacing
  2. word-spacing
  3. white-space
  4. text-transform
  5. vertical-align

Next section

That's the end of this half of the bug guide. To read the other half, which considers color, margins, tables, lists and more, you should click here.