|
|||||||
|
|||||||
|
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.
Section A - Bugs relating to embedding, linking and parsing style sheets (36 bugs).
Section B - Bugs with units (2 bugs).
Section C - Font bugs (25 bugs).
Section D - Text bugs (14 bugs).
Section E - Color and background bugs (25 bugs).
Section F - Margin bugs (13 bugs)
Section G - Other bugs - unsupported properties (25 bugs)
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)
Total bugs = 36 + 2 + 25 + 14 + 25 + 13 + 25 + 5 + 12 + 2 + 1 + 37 = 197.
If there are two or more <STYLE> blocks in a document, all but the last one is ignored.
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.]
If there are two or more LINKed style sheets in a document, all but the last one will be ignored.
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 attributeIE3 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).
IE 3 does not support alternate style sheets.
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 */
@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 attributeIE 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.
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.
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.
It treats classes as case-insensitive, whereas the HTML specification states that they are case-sensitive.
IE 3 will ignore classes that contain hyphens.
IE 3 will ignore classes that include Ç, even though this is valid as a non-ASCII character.
It treats ids as case insensitive, whereas the HTML specification states that they are case sensitive.
IE 3 will ignore IDs that contain hyphens.
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 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.
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.
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.
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).
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:
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.
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).
:active is ignored, which is good, since it won't cause any problems.
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.
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.
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.
IE 3 treats inherit as 0 when specified on the margin shorthand, and also gets it wrong on color under certain circumstances.
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.
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.
property macroAlthough 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).
IE 3 does not permit comments inside simple selectors (e.g., P./* comment */class), even though they are valid anywhere between tokens.
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.
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.
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.
Internet Explorer 3 treats 1em as 1pt.
Internet Explorer 3 treats 1ex as 1pt.
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.
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.
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.
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.
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.
IE 3 doesn't support normal, and interprets it as 0 (see part 2 for an explanation).
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:
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.
Although IE 3 generally applies a line-height value of around 1.2, it varies about this figure according to font-size.
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-family: cursive applies Comic Sans MS in IE 3, which isn't a cursive font.
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 ", or C), 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.
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"'>).
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 */
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-variant: small-caps is not supported, but you could always use font-family with a small caps font.
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.
<STYLE>
BODY {font-size: 72px;}
SMALL {font-size: 100%}
</STYLE>
</HEAD>
<BODY>
<FONT size="4">
<P>
<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.
</p>
So, to reiterate % is totally useless in IE 3, in ALL circumstances, and MUST not be used.
Larger and smaller are not supported, and as such will be ignored.
This doesn't work. However, font-weight: lighter does, so use this instead.
This doesn't work, so you must use bold instead.
Numerical font-weights don't work.
Font-style: normal doesn't work (i.e., you can't make I or EM normal, nor override inherited italics).
Font-style: oblique doesn't work.
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 ; */
IE 3 will entirely ignore font: declarations that include the normal value.
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.
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.).
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.
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.
IE 3 inherits text-decoration instead of having it inherit in the color of the parent as it should.
Overline doesn't work.
Blink doesn't work.
IE 3 inherits text-decoration to block elements, whereas the CSS spec states that is only inherited to inline descendants.
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}
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.
IE 3 doesn't support text-align: justify.
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.
Copyright © RichInStyle.com 2000; all rights reserved. See copyright document for terms of use. Please visit Bukit Lawang flood appeal.