Internet Explorer 4 bug sheet

What is this anyway?

This page demonstrates each of the 200+ bugs in Internet Explorer 4.

Testing on your computer

Are you running a version of Internet Explorer 4?

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

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

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 4 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 4, you won't be allowed to select it

Bug 4: @-rules:

@media handheld {
P.two {color: red;
background: green}
P.one {color: red;
background: green}
}
<P class="two">
This won't be red on green.
</P>
<P class="one">
This will be red on green.
</P>

This won't be red on green - neither should it.

This will be red on green - it shouldn't be.

P.three {color: @value {eval (6 * @location {url(cheeseburger)} ) };
color: green}
P.four {color: blue}

This should be green, but won't be.

This should be blue, but won't be.

Bug 5 - @import:

@import "quotes1.css";
@import 'quotes2.css';

This should be red as a result of quotes1.css, but won't be, because IE 4 doesn't support " in @import.

This should be red as a result of quotes2.css, but won't be, because IE 4 doesn't support ' in @import.

Bug 6: white space between ) and ;

@import url(space.css) ;

This should be red as a result of space.css, but won't be because IE 4 doesn't allow a space between ) and ;.

Bug 7: 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 4.

Bug 8: Adjacent sibling combinator, child combinator, and universal selector destroyed

DIV + P.ten {color: red}
HTML > P.eleven {color: red}
OL * LI.twelve {color: red}

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

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

1. This will be red, even though it shouldn't be.

Bug 9: :visited vs. :hover

A:hover {color: white;
background: black}
A:visited {color: black}

Here's a link that you will have visited.

According to CSS2, when you hover over the link above, it should be black on white (since :visited comes after :hover and therefore overrides it, and since BODY's background is white and A:visited's is transparent (initial value)). It won't be in IE 4 - it will be black on black.

Bug 10: :link vs. :hover

A: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 4 won't apply this, instead making it red on transparent.

Bug 11: :active vs. :hover

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

Here's a link to click on

When you click on the link above and hover over it, it will be red on red instead of green on red as it should be.

Bug 12: :active vs. :link and :visited

:active {color: black}
:link {color: white;
background: black}

Here's a link to click on

When you click on (i.e., activate) the link above it should be white on black, but instead will be black on black.

Bug 13: :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 14: Multiple anchor (<A>) pseudo-classes

:link:hover {font-size: 24pt;}

A visited link

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

Bugs 15 and 16: 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 4.

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

Bug 17: 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 18: Unicode 162-177 not permitted in classes

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

Bug 19: :first-line unsupported

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

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

Bug 20: :first-letter unsupported

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

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

Bug 21: Backslash not supported

P.\
nine {color: red}

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

Bug 22: comments

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

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

Bug 23: comments

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

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

Bug 24: comments

/* **/ P.fifteen {color: red}

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

Bug 25: comments

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

Bug 26: 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 B

Bug 1 and 3: Rounding

Each 'Some text' should be in line (because equivalent line heights are specified), but won't be.

Bug 2: ex destroyed

The tops of the images above should not be lined up (the two fonts will have different sizes), but will be.

Section C

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 4 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: font-size: smaller

SmallerSmaller

The two pieces of text above should be of different sizes (one has font-size: 16px, the other font-size: smaller than that value).

Bug 6: relative font sizes on elements that default to monospace, sizes relate to default, not inherited value

The two pieces of text above should appear as one (one is a TT element with font-size: 100%; the other a DIV with font-family: monospace).

Bug 7: oblique

Should be slanted, but will be italic.

Bug 8: small-caps

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

Bug 9: normal

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

Bug 10

<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 11: 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 12: normal added when image inline

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

Bug 13: % buggy on big font-size

Here's a P style=font-size: 300px; line-height: 100%

Some text

Section D - 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 associated with the block, not the text.

Bug 2: text-indent doesn't work on BODY

See the first line of this document, which should (BODY {text-indent: 2cm}) be indented, but won't be.

Bug 3: text-indent not inherited from BODY

See the whole of the document - there is no text-indent.

Bug 4: % interpreted relative to BODY's width

Bug 5: text-decoration inherited

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 6: text-decoration inherited via classes

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 7: inherited to block descendants

Bug 8: text-decoration: blink unsupported

This text should be blinking but won't be.

Bug 9: text-decoration: blink not correctly ignored

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

Bug 10: alt text on images not underlined

The image here: should have its alt text underlined, but won't in IE 4.

Bug 10: word-spacing not supported

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

Bug 11: sub and super only, on text

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

Bug 12: vertical-align: middle

The image won't be aligned with the middle of the text - instead with the baseline.

Bug 13: super and sub not supported on images or forms

This image should be subscripted but won't be.

Bug 14: 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 15: length/% unsupported

This should be raised by 2 inches; it won't be.

Bug 16: white-space unsupported.

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

Section E

Bug 1: background-position

The background (background: url(green.gif) 50% 50%;) should cover the whole of this element, but it won't. The background (background: url(green.gif) 50% 50%;) should cover the whole of this element, but it won't. The background (background: url(green.gif) 50% 50%;) should cover the whole of this element, but it won't. The background (background: url(green.gif) 50% 50%;) should cover the whole of this element, but it won't. The background (background: url(green.gif) 50% 50%;) should cover the whole of this element, but it won't. The background (background: url(green.gif) 50% 50%;) should cover the whole of this element, but it won't. The background (background: url(green.gif) 50% 50%;) should cover the whole of this element, but it won't. The background (background: url(green.gif) 50% 50%;) should cover the whole of this element, but it won't. The background (background: url(green.gif) 50% 50%;) should cover the whole of this element, but it won't. The background (background: url(green.gif) 50% 50%;) should cover the whole of this element, but it won't. The background (background: url(green.gif) 50% 50%;) should cover the whole of this element, but it won't. The background (background: url(green.gif) 50% 50%;) should cover the whole of this element, but it won't. The background (background: url(green.gif) 50% 50%;) should cover the whole of this element, but it won't. The background (background: url(green.gif) 50% 50%;) should cover the whole of this element, but it won't. The background (background: url(green.gif) 50% 50%;) should cover the whole of this element, but it won't.

Section F

Bug 1: margins unsupported on inline elements

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 4 it will.

Bug 3: padding not applied to empty elements

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

Bug 4: percentages relate to height of viewport

The above two elements should line up. In IE 4 they will not.

Bug 5: percentages relate to width of viewport

The actual width of the content above will be wrong - it should be the same but won't be.

Bug 6: auto treated as 0

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

Bug 7: 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 8: inheritance of width set by margin-right

Bug 9: margin-right not ignored

Bug 10: percentages not related to width of containing block

The two blocks above should be of equal width (they are contained in a 200-pixel wide DIV, and one has padding-right: 50%, the other padding-right: 100px), but in IE 4 they won't be.

Bug 11: on DIV with background-color

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 backgrounds of the P elements inside it will bleed upwards.

Section G

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. You won't be able to see it.

Bug 4: elements with borders inside elements that have width set

Bug 5: borders on inline elements

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

Bug 6: border-width deducted from width

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

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

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

Bug 8: dotted and dashed destroyed

Section H

Bug 1: elements that overflow their containing block

Bug 2: width doesn't work on non-replaced elements except DIV

This P element should have a 100-pixel width. In IE 4 it won't have.

Bug 3: small widths cause content suppression

The DIV element above has width: 0. This should either cause the browser to set min-width to a greater value and therefore ignore the width declaration or (better IMO) allow the entirety of the DIV to overflow. Its chosen option, cutting off the overflow, is not acceptable.

Bug 4: height suppresses margin-right

Bug 5: height doesn't work on non-replaced elements other than DIV

This P should have a 1000-pixel height, but won't in IE 4.

Bug 6: elements that should overflow instead extend containing block

Section I - float and clear

Bug 1: width

The DIV above should have a width of 0 (because that is the value that results from the box model equation - width is not specified), but in IE 4 it will have 100% width.

Bug 2: 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 4 because it won't reflow the line, it will be rendered as e like
m.

Bug 3: floating elements that overlap with subsequent block elements

The floating image should overlap this element, but in IE 4 will shorten it. The floating image should overlap this element, but in IE 4 will shorten it. The floating image should overlap this element, but in IE 4 will shorten it. The floating image should overlap this element, but in IE 4 will shorten it. The floating image should overlap this element, but in IE 4 will shorten it. The floating image should overlap this element, but in IE 4 will shorten it. The floating image should overlap this element, but in IE 4 will shorten it. The floating image should overlap this element, but in IE 4 will shorten it. The floating image should overlap this element, but in IE 4 will shorten it.

Bug 4: 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 4 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 4 will only allow flow on one side.

Bug 5: floating elements within containing blocks that have a background color cause problems

The text should flow around the image in an attractive manner. Do you see?The text should flow around the image in an attractive manner. Do you see?The text should flow around the image in an attractive manner. Do you see?The text should flow around the image in an attractive manner. Do you see?The text should flow around the image in an attractive manner. Do you see?The text should flow around the image in an attractive manner. Do you see?The text should flow around the image in an attractive manner. Do you see?The text should flow around the image in an attractive manner. Do you see?The text should flow around the image in an attractive manner. Do you see?The text should flow around the image in an attractive manner. Do you see?The text should flow around the image in an attractive manner. Do you see?The text should flow around the image in an attractive manner. Do you see?The text should flow around the image in an attractive manner. Do you see?

The correct behavior will not happen in IE 4.

Bug 6: floats aligned with border edge rather than content edge

Me like Spike
You like Spike?

The M above should be aligned with the top of line box from which it was displaced, but in IE4 will be aligned with the top of the border.

Bug 7: backgrounds of margins of floating elements

Text.

The margin of the IMG will be blue in the space between the two Ps. This is wrong because margins are transparent.

Bug 8: 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 9: 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 10: padding increased to twice that of viewport

Bug 11: wide floats followed by non-floated elements cause problems

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

Bug 12: HR shortened instead of overlapped

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

Bug 13: clear allowed to affect inline content

This text should flow around the image in an attractive manner, but in IE 4 it will not do so - the clear: left, which should have no effect on inline content, will move the text down.

Bug 14: clear on floated elements allowed to affect block elements

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 4 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 4 this won't be so because it uses its own cursor.

Bug 5: display: block doesn't work

There is a SPAN here: that should behave like a block element, with a line break before and after:, but in IE 4 this won't be so because it doesn't support display: block.

Bug 6: display: inline doesn't work

Bug 7: display: list-item doesn't work

Bug 8: 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 4 there will be only one page break before each.

Bug 9: 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 4 it will be.

Section K

Bug 1

Top left?

The element above, which has been specified as being absolutely positioned at the top of the left of BODY, won't be because IE 4 only supports absolute positioning on DIV and TABLE of block elements.

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

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

Bug 4: clip unsupported

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

Bug 5: 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 4.

Section L

Bug 1: height and width unsupported on INPUT type="radio" and type="checkbox"

The square within which this radio button is circumscribed should be 100 pixels square .

This checkbox should be 100 pixels square: .

Bug 2: font properties unsupported on OPTION

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

Bug 3: backgrounds and color

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

Bug 4: background images

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

Bug 5: 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 6: line-height and padding 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: .

Here's an text box with a big padding 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 7: text-decoration unsupported on OPTION

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

Bug 8: white-space unsupported on TEXTAREA

Bug 9: 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 10: margin not supported on OPTION

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

Bug 11: border not supported on INPUT type="radio" or type="checkbox"

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

Bug 12: border rendered as transparent on INPUT type="image"

This image button should have a red border, but it will be
transparent:

Section M

Bug 1: margin-right set on its own

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

Bug 2: width set on its own

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

Bug 3: margin-left set on its own

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

Bug 4: 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 5: 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 6: 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 4) or backgrounds, the two constituent parts of IE 4's horizontal rules)

Bug 7: border properties

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

Bug 8: padding

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

Section N

Bug 1: borders on captions

The CAPTION above will have the border overlapping with the CAPTION because IE 4 doesn't adjust caption sizes to apply borders.

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

Bug 3: inheritance of font properties

Bug 4: inheritance

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

Bug 6: table rows and cells can't be positioned

Bug 7: properites 'inherited' from columns

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

Here's a P element.

Bug 9: text-align applied to TABLEs

Bug 10: text-align not inherited into table cells

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: backgrounds color too much of list items

1. The background of this should only color to the left of the text - the marker and the space between the marker and the text should be transparent; not so in IE 4.

Bug 3: borders cover too much of box

1. The border of this should only extend to the left of the text, but in IE 4 will cover further to the left than that as well.

Bug 4: text-indent moves list marker

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

Bug 5: 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 6: when following float, border edge moved

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

Bug 7: list positions unsupported

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 4 this behavior won't be observed.

Bug 8: '.' 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 4 it will.

Bug 9: 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 10: 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 P

1. This has border-style: solid thin, and should not therefore have a border but in IE 4 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 4 it will be.
3. This SPAN has width: 10px, which should be ignored as nonsensical, but in IE 4 it will be applied.
4. This SPAN has height: 500px, which should be ignored as nonsensical, but in IE 4 it will be applied.
5. This has font: 30px, which is invalid and should be ignored - not so in IE 4. This has font: monospace, which will be ignored.

6. This shouldn't have a big line-height because of a space after the '/', but it will in IE 4.

7. This shouldn't have a background because of whitespace inside the string macro, but it will be in IE 4.
8. This shouldn't have a background because of the missing end quote from the string macro, but it will be in IE 4.
9. This shouldn't be red because the @import rule does not precede all blocks, but it will in IE 4.
10. This shouldn't be red because LI/* */ .comment does not match a LI with class="comment", but it will in IE 4.
11. This shouldn't be red because the style rules are enclosed in {} inline, which is invalid inline, but it will in IE 4.
12. This should not have a 100 pixel margin because comma-separated margins are invalid, but it will in IE 4.

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

14. This shouldn't be in Courier New because of (invalid) trailing whitespace in the font name ("Courier New "), but it will in IE 4.
15. This LI has an invalid border declaration (border: solid thick thin), which should be ignored, but IE 4 instead applies it as border: solid thin.
16. This should not be in Courier New, but will be in IE 4 because it tolerates the omission of the (obligatory) quotes around fonts that contain whitespace.
17. This should not be red, but it will be in IE 4 because it tolerates non-integer values on the decimal rgb format (in this case rgb(249.9, 0, 0).
18. 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 4.
19. 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 4 it will have.
20. This should not be 50 pixels high, but will be in IE 4 because it parses DIMENSION tokens with missing units as pixels.
21. 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 4.
22. This shouldn't be red because the # is missing, but will be in IE 4.
23. This should have a 100-pixel top margin, but won't in IE 4 because it will parse margin-top: [No value] as margin-top: 0.
24. 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 4.
25. 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 4.
26. 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 4.
27. This shouldn't be red because character references are invalid in IDs, but will be in IE 4.
28. This should not be red because the block isn't closed by a }, but it will be in IE 4.
29. This LI, which has an ID of 1, should not be red (because the ID is invalid), but will be in IE 4.
30. This document has {font-weight: bold}. This will be applied as HTML {font-weight: bold} in IE 4 (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.
31. This element, which has a class of 'rock', should not be red because MADEUPELEMENT.rock {color: red} does not match it, but will be in IE 4
32. 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 4.
33. This bug, of ignoring pages that don't include at least one --> for all the <!-- in the STYLE element, cannot be tested here.
34. 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.
35. The text here: text should be superscripted because vertical-align: super; vertical-align: madeup should result in vertical-align: madeup being ignored with reversion to super, but in IE 4 it won't and the text won't be superscripted.
36. This should not be in Courier New because font names are case-sensitive, but will be in IE 4.
37. This should not be in Times New Roman because it is not matched by 'Times', but will be in IE 4.
38. 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.
39. This should not be red, because color 4458459: red is not a valid declaration, but will be in IE 4.
40. This should not be red because the media attribute is case-sensitive, but it will be in IE 4 because it disregards the case-sensitivity of media.
41. 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 4.
42. This should be red because the media attribute is truncated at the first instance of whitespace, but won't be in IE 4.

43. ---

    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 4.
44. The block of color above should be blue because z-index values must be integers, but in IE 4 the floating point value is honored making it red.

45. 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 4, when in fact mixing of length keywords and numeric values is invalid and should result in the declaration being ignored.
46. This should have an hourglass for a cursor, but in IE 4 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].
47. This has been specified to be positioned 5% down, but this should be ignored - in IE 4 it won't be.
48. This has been specified as font-size: 2 em, but this is invalid and should be ignored - in IE 4 it won't be.
49. This has color=red and therefore shouldn't be red because '=' is not a valid assignment character - in IE 4 it will be.

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