Internet Explorer 5/5.5 bug sheet

Testing on your computer

Are you running a version of Internet Explorer 5/5.5?

Are the observed results for you different from those describe here?

If so, please e-mail bugs@richinstyle.com with the precise version number (try Help/About), so that more bugs can be documented.

What is this anyway?

This page demonstrates each of the 150+ bugs in Internet Explorer 5 and 5.5.

Section A - parsing bugs

Attaching style

Bug 1: HTTP link header

<meta http-equiv="link" content="<meta.css>; rel=stylesheet; type='text/css'">

This is linked by the META declaration above; it should be red, but won't.

Bug 2: preferred style sheets

<LINK rel="stylesheet" href="ignored.css" title="ignored">
<LINK rel="stylesheet" href="preferred.css" title="preferred">

This should not be red because only one preferred style sheet should be used at once - all but the last should be ignored; however, in IE 5 it will.

Bug 3: alternate style sheets

<LINK rel="alternate stylesheet" href="alternate.css" title="alternate">

This should be red when the alternate style sheet has been selected; in IE 5, you won't be allowed to select it

Bug 4: Style specificity

BODY P#twenty {color: red}
<P style="color: blue">

This element should be red since style's specificity is 100, but it will be blue in IE 5.

Bug 5: space required between @import and string

This won't be red because IE 5 incorrectly requires a space between IMPORT_SYM and STRING.

Section B - Application of style to pages

Bug 1: Adjacent sibling combinator and child combinator destroyed 5

DIV + P.ten {color: red}
HTML > P.eleven {color: red} 

This will be red because IE 5 doesn't support + properly.

This will be red because IE 5 doesn't support > properly.

Bug 2: :link vs. :hover

:hover {
color: red;
/* background: transparent - initial value; not explicitly stated */
}
A:link {
color: green;
background: red;
}

Here's a link that you will not have visited.

The link above should be green on red when hovered over (since :link follows :hover and therefore overrides it), but IE 5 won't apply this, instead making it red on red.

Bug 3: :active

:active {color: red;}

Here's a link to tab to.

The link above shouldn't be red when tabbed to, since that would be the correct behavior for :focus, not :active.

Bug 4: Multiple anchor (<A>) pseudo-classes

:link:hover {font-size: 32px;}

A visited link

When you hover over the link above, it should not be 32px high since the link is visited, but it will be.

Bugs 5 and 6: ID and class case sensitivity

P.Case {color: red}
P#Case {color: red}
<P class="case"> <P class="case">

This shouldn't be red, but it will be in IE 5.

This shouldn't be red, but it will be in IE 5.

Bug 7: multiple classes destroyed

This has class="redrum", and the style rule applied is P.whiterum.redrum. It shouldn't be red, but it will be.

Bug 8: Unicode 162-177 not permitted in classes

This (class="Ģi") should be red, but won't be in IE 5.

Bug 9: :first-line unsupported5

P.twentyone:first-line {color: red}

This :first-line should be red, but it won't be.

Bug 10: :first-letter unsupported5

P.twentytwo:first-letter {color: red}

This :first-letter should be red, but it won't be.

Bug 11: vertical-align unsupported on :first-letter55

The first letter of this should be superscripted.

Bug 12: vertical-align unsupported on :first-line55

The first letter of this should be superscripted.
second line

Bug 13: :first-line applied to line not text55

The background of the first line should be behind the text only, since :first-line, as a pseudo-element selects text, not the line box.

Bug 14: :first-line makes list marker red.55

1. The marker of this should not be red.

Section C - Key concepts

Bug 1: Backslash not supported

P.\
nine {color: red}

This won't be red due to IE 5's non-support of the backslash.

Bug 2: comments

P/* comment */.thirteen {color: red}

This won't be red, even though it should be.

Bug 3: comments

@import /* a comment */ url(nocomment.css);

This won't be red, even though it should be.

Bug 4: comments

This should be red (color/* */ : red), but it won't be.

Bug 5: comments

This should be italic (.comport/* */ {font-style: italic), but it won't (only) be - the HTML element will (the HTML element can be seen at the top of the page - the rest of the page is enclosed in a DIV to override the ugly effects of this bug).

Section D - bugs with units

Bug 1: ex applied as 0.5em

The three images above will appear as one, even though they should not because each has a different font and so therefore height: 1ex should result in a different height for each.

Section E - font bugs

Bug 1: Font matching

<p style="font-family: WingDings">
The cat
</p>

The cat

The above text should say 'The cat' in a font other than WingDings, since WingDings doesn't contain glyphs for any of the requested characters, but IE 5 won't obey this.

Bug 2: lighter

The two pieces of text above should be of different weights (the one on the left is lighter over 900, the one on the right is 600).

Bug 3: bolder

The two pieces of text above should be of different weights (the one on the left is lighter over 500, the one on the right is 700).

Bug 4: font-size: medium

This should be the same size as the rest of the document (aside from the headings and PREs), but won't be (font-size: medium).

This should be smaller than the rest of the document (aside from the headings and PREs), but won't be (font-size: small).

Bug 5: oblique

Should be slanted, but will be italic.

Bug 6: small-caps

Should be small-caps - but will just be uppercase.

Bug 7: normal

<div style="text-transform: capitalize">
<p style="font-variant: normal">
Should be uppercase; won't be.
</p>
</div>

Bug 8

<p style="line-height: 100px; font-variant: small-caps; font: caption">

This should not have an enormous line-height and shouldn't be small-caps unless that is appropriate for caption text.

Bug 9: hyphenated user fonts

<P style="font: smallcaption">
<P style="font: small-caption">

This should not be in small caption, but will be.

This should be in small caption, but won't be.

Bug 10: normal added when image inline

This text has line-height 300px, but the image will break this in IE 5.

Bug 12: line box height incorrectly calculated

Bug 13: minimum background height on a line box = font-size5

Some text.

The element above has line-height: 0, and therefore should have no background. In IE 5 however, it will have because it won't render backgrounds smaller than font-size.

Section F - Text bugs

Bug 1: big text-indents

This text (text-indent: 100%) will extend the element's width, the background being applied behind the overflowed text, which is wrong because the overflow doesn't affect the background, which is associate with the block, not the text.

Bug 2: text-decoration inherited5

This P has text-decoration: underline, and this SPAN has text-decoration: none, which should not suppress the ancestor's t-decoration but does.

Bug 3: text-decoration inherited via classes5

This P has text-decoration: underline via style and line-through via a class. It should only be underlined, but will be l-throughed as well.

Bug 4: inherited to block descendants

Bug 5: text-decoration: blink unsupported

This text should be blinking but won't be.

Bug 6 : text-decoration: blink not correctly ignored

This text should be underlined (text-decoration: underline; text-decoration: blink;) but won't be.

Bug 7: word-spacing not supported

This should have a whole load of word-spacing; it won't.

Bug 8: sub and super only, on text

This should have the top of the text aligned with the top of the image.

Bug 9: vertical-align: middle

The image won't be aligned with the middle of the text - instead with the baseline (in IE 5.5 with an arbitrary, rather than calculated middle).

Bug 10: super and sub not supported on images or forms 5

This image should be subscripted but won't be.

Bug 11: vertical-align: text-bottom.

You will notice that the image won't be aligned with the bottom of the background as it should be (because the bottom of the background is, on inline elements, the bottom of the text).

Bug 12: length/% unsupported

This should be raised 2in; it won't be.

Bug 13: vertical-align: super and sub increase background height

Some text with a superscripted bit.

In the text above, the blue background should remain constant throughout the line, and should be visible below the superscript. In IE 5 however, the superscript will

Bug 14: white-space unsupported.

This text has a line break in its markup here: But not in IE 5.

Bug 15: Bug 15: ƒ uppercased results in nothing

Here is ƒ uppercased: ƒ. In IE 5 the result will be nothing.

Section G

Bug 1: margins unsupported on inline elements5

This first word won't have a right margin, although it should do.

This: word won't have a 10 pixel padding.

Bug 2: vspace/hspace not equivalenced

This image should not have a big margin because CSS margin overrides HTML vspace/vspace, but in IE 5 it will.

Bug 3: padding not applied to empty elements5

There should be a big block of red above; there won't be.

Bug 4: auto treated as 0

This element should be right-aligned; it won't be.

Bug 5: negative margin-right doesn't cause scroll bar

The right of this element will be cut off in mid-sentence. The right of this element will be cut off in mid-sentence. The right of this element will be cut off in mid-sentence. The right of this element will be cut off in mid-sentence. The right of this element will be cut off in mid-sentence. The right of this element will be cut off in mid-sentence. The right of this element will be cut off in mid-sentence. The right of this element will be cut off in mid-sentence. The right of this element will be cut off in mid-sentence. The right of this element will be cut off in mid-sentence. The right of this element will be cut off in mid-sentence. The right of this element will be cut off in mid-sentence. The right of this element will be cut off in mid-sentence. The right of this element will be cut off in mid-sentence. The right of this element will be cut off in mid-sentence. The right of this element will be cut off in mid-sentence. The right of this element will be cut off in mid-sentence. The right of this element will be cut off in mid-sentence.

Bug 6: margin-right not ignored

Bug 7: on DIV with background-color5

The DIV above should have a 2em bit of white space inside its border (because it has padding: 2em; border: solid), but it won't have - it will be red at the top and green at the bottom, because the P elements inside it will bleed upwards.

Section H

Bug 1: borders on BODY

The BODY of this has a border; it will be applied outside of the scroll bar, but shouldn't be.

Bug 2: margins on BODY

Equally, the margins of BODY will be applied inside the border.

Bug 3: border on HTML

This HTML element should have a red border. It will be rendered on top of BODY.

Bug 4: borders on inline elements 5

This SPAN should have a border; it won't have.

Bug 5: border-width deducted from width

The two elements above should have the same width because they both have width: 300px, but in IE 5 they won't have.

Bug 6: 3D border styles rendered as solid when color is dark

This element should have a grooved 10 pixel border, but in IE 5 because the border color is dark (in this case black), you won't be able to tell that this is so.

Bug 7: dotted and dashed destroyed5

Section I

Bug 1: elements that overflow their containing block

Bug 2: elements that should overflow instead extend containing block

Section I - float and clear

Bug 1: inline floats that are not the first thing in their line box are moved down to the line beneath

em like.

The element should be rendered as 'me like', but in IE 5 because it won't reflow the line, it will be rendered as e like
m.

Bug 2: text wraparound is only done on one side

The floating image should allow the text to flow on both sides of the image, but in IE 5 will only allow flow on one side. The floating image should allow the text to flow on both sides of the image, but in IE 5 will only allow flow on one side.

Bug 3: content that overlows floated blocks is rendered invisible

This 'T' will have its top cut off because of its small line height instead of allowing it to overflow, as it should.

Bug 4: floats not wrapped

The three DIVs above should not float side-by-side (only the first two should) because where a DIV will overflow the containing block, it should be moved down.

Bug 5: wide floats followed by non-floated elements cause problems5

This non-floated P element should flow below the DIV, but in IE 5 it will flow to the right of it.

Bug 6: HR shortened instead of overlapped

You will see that the HR will be shortened instead of overlapped with.

Section J

Bug 1: cursor: url() unsupported

When hovered over, this element should have an animated RichInStyle.com cursor; in Internet Explorer, this won't occur.

Bug 2: cursor: pointer unsupported

When hovered over, this element should have a link cursor at CSS-2.

When hovered over, this element should also have a link cursor (cursor: hand; cursor: pointer).

Bug 3: cursor: auto unsupported

Bug 4: n-resize, ne-resize, nw-resize, w-resize, e-resize, s-resize, se-resize, sw-resize buggy

This element has a n-resize cursor. In Windows, this should be the same as the next element (which has a s-resize) cursor, but in IE 5 this won't be so because it uses its own cursor, which doesn't correspond to the system settings.

This element has a s-resize cursor. In Windows, this should be the same as the previous element (which has a n-resize) cursor, but in IE 5 this won't be so because it uses its own cursor.

Bug 5: page-break-before and page-break-after

The first two elements in this document have page-break-before: left. Because UAs are required to keep a track of left and right pages even if they print them as the same, there should be one page break before one and two before the other (since if page-break-before: left results in a left page, the next element will therefore require two page breaks to get onto another left page), but in IE 5 there will be only one page break before each.

Bug 6: printed margins honored at top of pages

The first element in this document has a big margin. This shouldn't be honored because the element is the first thing on its page, but in IE 5 it will be.

Section K

Bug 1: scroll doesn't always result in a scrollbar

Bug 2: overflow-handling behavior only triggered for content that overflows the bottom of its containing block

Bug 3: clip unsupported

The block above should appear as a 100-pixel square block of red because of overflow: hidden and clip, but in IE 5 it will just be a 100-pixel square block of red.

Bug 4: visibility suppresses element and all descendants

The following element has visibility: hidden on the DIV and visibility: visible on the P inside it. It should therefore be visible - not in IE 5.

Section L

Bug 1: font properties unsupported on OPTION

The second OPTION in this SELECT should be 50 pixels high and bold; in IE 5 it won't be An optionAnother option

Bug 2: backgrounds and color

1. The button here (not the text box) will be unstyled:

Bug 3: background images

The second OPTION should have a background image: An optionAnother option. The SELECT should have a background image: An option

Bug 4: line-height

These all should have big line heights (they won't have):

1. A selectA select
2. The second option here is thus styled: An optionAn option

Bug 5: line-height destroyed on INPUT type="text" and type="password"

Here's an text box with a big line height that will cause the initial text to be made invisible: .

Here's an password box with a big line height that will cause the initial text to be made invisible: .

Bug 6: text-decoration unsupported on OPTION

The second OPTION here should be underlined: An option An option

Bug 7: white-space unsupported on TEXTAREA

Bug 8: padding unsupported on SELECT and OPTION

The SELECT here should have 100 pixels of padding: An option

The second OPTION here should have 100 pixels of padding: An option An option

Bug 9: margin not supported on OPTION

The second OPTION here should have a 100 pixel margin: An optionAn option

Bug 10: border destroyed on INPUT type="radio" or type="checkbox"

Here's a radio button and checkbox that should have borders but won't:

Section M

Bug 1: margin-left set on its own

This HR should be right-aligned and half normal width - it won't be:

Bug 2: both margin-left or margin-right and width set

This horizontal rule should be flush with the right of BODY and half normal width - it won't be:

Bug 3: height in %

The HR above should be 10 pixels high (because of a height in % with a 100-pixel high ancestor DIV) - it won't be (note that the extra space is due to the DIV).

Bug 4: color

The horizontal rule above should not be red (color specified - color doesn't affect borders (unless border-color is normally set to color, which it isn't in IE 5) or backgrounds, the two constituent parts of IE 5's horizontal rules)

Bug 5: border properties

The border of the above horizontal rule should be blue - it won't in IE 5.

Bug 6: padding

The HR above should have 10 pixels of vertical padding (applied inside the border) - it won't in IE 5.

Section N

Bug 1: height, width, position and margins ignored on CAPTION

Bug 2: inheritance5

Bug 3: padding not applied to tables or table rows, but instead inherited therefrom

Bug 4: properites 'inherited' from columns 5

Bug 5: unclosed P prior to table causes the table to be considered as part of the P

Here's a P element.

Bug 6: negative margins or text-indent in table cells causes truncation

Bug 7 and 8: table-layout: fixed

The table above has table-layout: fixed. Because this isn't valid unless the table has a border, it shouldn't overlap the table - it should be given the width of its content; in IE 5, this won't be so.

As to bug 8, you will notice that the content overflowing the table will (incorrectly) be truncated.

Section O

Bug 1: marker not taken into account for finding height of line box

1. This line box should be 100 pixels high

because although the text is enclosed in a 10 pixel SPAN, the LI has line-height: 100px, which will set the line-height of the marker to 100 pixels, which therefore makes the height of the whole line box 100 pixels.

Bug 2: text-indent moves list marker

1. The text content of this element should be moved, but the marker should not. In IE 5 however, the marker will be affected by text-indent.

Bug 3: text-align moves list marker

1. Although the text of this should
   be centered, the position of the marker
   should not be affected - markers are positioned
   relative to the border edge of the element, and
   the border edge is not affected by text-align.

Bug 4: list markers suppressed where list items overlap with floats

1. A floating DIV. A floating DIV. A floating DIV. A floating DIV. A floating DIV. A floating DIV. A floating DIV.
2. This is a list item on which the border should at the left of the BODY - it won't in IE 5.

Bug 5: large font sizes wrong

1. My

The text above should not overlap with the list marker. In IE 5 however, this won't be so

Bug 6: list positions buggy

1. This should have the list marker inside the principal box - the list marker should be in line with the left of the second line of text, but in IE 5 this behavior won't be observed.

Bug 7: '.' placed after ordered list markers

1. This shouldn't have a '.' after the number (i.e., it shouldn't be 1., it should be 1), but in IE 5 it will.

Bug 8: all but small images destroy when line-height is set to a value other than normal

1. This list item has a medium-sized image and line-height 1.4. It will cause mayhem. This list item has a medium-sized image and line-height 1.4. It will cause mayhem. This list item has a medium-sized image and line-height 1.4. It will cause mayhem. This list item has a medium-sized image and line-height 1.4. It will cause mayhem. This list item has a medium-sized image and line-height 1.4. It will cause mayhem. This list item has a medium-sized image and line-height 1.4. It will cause mayhem. This list item has a medium-sized image and line-height 1.4. It will cause mayhem. This list item has a medium-sized image and line-height 1.4. It will cause mayhem. This list item has a medium-sized image and line-height 1.4. It will cause mayhem.

Bug 9: none doesn't work

1. This LI, which has list-style-image: url(green.gif); list-style: decimal should not have a list image because the list-style property, like all shorthands, resets all unset values to their initial value - in the case of image, this is none.

Section Q

1. This has border-style: solid thin, and should not therefore have a border but in IE 5 it will be applied as border-style: solid none none none.
2. This ADDRESS element should not be red because the element_name is enclosed in < and >, but in IE 5 it will be.
3. This SPAN has width: 10px, which should be ignored as nonsensical, but in IE 5 it will be applied.
4. This SPAN has height: 500px, which should be ignored as nonsensical, but in IE 5 it will be applied.
5. This has font: 30px, which is invalid and should be ignored - not so in IE 5. This has font: monospace, which will be ignored.
6. This shouldn't have a background because of whitespace inside the string macro, but it will be in IE 5.
7. This shouldn't have a background because of the missing end quote from the string macro, but it will be in IE 5.
8. This shouldn't be red because the @import rule does not precede all blocks, but it will in IE 5.
9. This shouldn't be red because the style rules are enclosed in {} inline, which is invalid inline, but it will in IE 5.
10. This should not have a 100 pixel margin because comma-separated margins are invalid, but it will in IE 5.

11. This P element has no vertical-align

    This P element has no vertical-align - it should look the same as the previous example, but it won't in IE 5.

12. This shouldn't be in Courier New because of (invalid) trailing whitespace in the font name ("Courier New "), but it will in IE 5.
13. This LI has an invalid border declaration (border: solid thick thin), which should be ignored, but IE 5 instead applies it as border: solid thin.
14. This should not be in Courier New, but will be in IE 5 because it tolerates the omission of the (obligatory) quotes around fonts that contain whitespace.
15. This should not be red, but it will be in IE 5 because it tolerates non-integer values on the decimal rgb format (in this case rgb(249.9, 0, 0).
16. This should be in red because color: red; color: 3dbackground should be treated as color: red (since color: 3dbackground is invalid), but not so in IE 5.
17. This has background: url(green.gif) autumnmagnolia; color: red and therefore should have no background at all because autumnmagnolia is an invalid color, making the whole declaration invalid but in IE 5 it will have.
18. This should not be 50 pixels high, but will be in IE 5 because it parses DIMENSION tokens with missing units as pixels.
19. This should not be red because rgb percentages (e.g., color: rgb(100%, 0, 0)) must not be to more than one decimal place, but will be in IE 5.
20. This shouldn't be red because the # is missing, but will be in IE 5.
21. This should have a 100-pixel top margin, but won't in IE 5 because it will parse margin-top: [No value] as margin-top: 0.
22. This shouldn't be 24 pixels high because values enclosed in quotes (e.g., "24px") are invalid and should be ignored, but it will be in IE 5.
23. This should not have a 100-pixel margin because more than four values have been supplied making the whole declaration invalid, but it will have in IE 5.
24. This should not be red because the HTML spec states that the first instance of </ should be treated as terminating the style block, but it will be in IE 5.
25. This shouldn't be red because character references are invalid in IDs, but will be in IE 5.
26. This should not be red because the block isn't closed by a }, but it will be in IE 5.
27. This LI, which has an ID of 1, should not be red (because the ID is invalid), but will be in IE 5.
28. This document has {font-weight: bold}. This will be applied as HTML {font-weight: bold} in IE 5 (you can see by looking at the first line of the document - the rest of the document is enclosed in a DIV to override this) when it should in fact be ignored. 5
29. This element should not be red because DIV & P, .notcorrectlyparsed {color: red} should result in {color: red} being ignored since DIV & P is not a valid selector, but it will be red in IE 5. 5
30. This shouldn't have a green background but will - it has a comment inside URI, which is invalid since comments are only valid between tokens, not inside them. 5
31. This should not be in Courier New because font names are case-sensitive, but will be in IE 5.
32. This should not be in Times New Roman because it is not matched by 'Times', but will be in IE 5.
33. This DIV element has a height of 300% and should therefore have a normal height because percentage heights should be ignored when the height of the containing block is unknown.
34. This should not be red, because color 4458459: red is not a valid declaration, but will be in IE 5.
35. This should not be red because the media attribute is case-sensitive, but it will be in IE 5 because it disregards the case-sensitivity of media.
36. This shouldn't be underlined because text-decoration: underline cheese isn't a valid declaration, which should therefore be ignored, but it will be in IE 5.
37. This should be red because the media attribute is truncated at the first instance of whitespace, but won't be in IE 5.

38. ---

    The horizontal rule above should not be right-aligned (because although text-align is applied to block elements, it doesn't affect them - only their contents), but it will be in IE 5.
39. The block of color above should be blue because z-index values must be integers, but in IE 5 the floating point value is honored making it red.

40. The DIV above is set to be 400-pixels wide. It has a 0 center declaration for background, which will cause it to be at the left center in IE 5, when in fact mixing of length keywords and numeric values is invalid and should result in the declaration being ignored.
41. This should have an hourglass for a cursor, but in IE 5 it won't because cursor: wait; cursor: busy (where busy is invalid, but represents a possible extension to CSS) is treated as cursor: [no declaration].
42. This has been specified to be positioned 5% down, but this should be ignored - in IE 5 it won't be.
43. This has been specified as font-size: 2 em, but this is invalid and should be ignored - in IE 5 it won't be.
44. This has color=red and therefore shouldn't be red because '=' is not a valid assignment character - in IE 5 it will be.
45. This bug, of ignoring pages that don't include at least one --> for all the <!-- in the STYLE element, cannot be tested here.

46. The first letter should not be red (pseudo-element before class).55

    However, this element should be red, because the selector was grammatically correct, and so therefore there is no reason to ignore the ruleset.55

    The picture is here:

47. This should be flowing round the image, despite what CSS says to the contrary - clear has no effect on inline elements.55

48.  This element has a non-breaking space as its first letter. Therefore the 'T' shouldn't be red.55

    The picture is here:

49. This should be flowing around the image, despite what the CSS spec states to the contrary - :first-line selects inline content, and clear has no effect on inline content.55

Copyright © RichInStyle.com 2000; all rights reserved. See copyright document for terms of use. Please visit Bukit Lawang flood appeal.