bug 338 - Ordered lists with CSS break in IE

Issue: #338
Affects: IE6, IE7, IE8 Beta 1, IE8 Beta2, IE8 PR1, IE8 RC1

The ordered list element <ol> in HTML allows developers to present an ordered list of items. Believe it or not, 1 (one) CSS property can make it render as:
1,1,1,1,1,1,1,1,1,1 (in fact you'll never get a 2!)

You don't believe me, do you? ;-) I'm not surprised I still can't believe it.

check out the example list below in any non-IE browser, and you will see the numbers 1,2,3,...8,9,10. View the exact same page in IE (6 or 7), and you will only get 1,1,1,...1,1,1.


Example 1:

Sorry, the blogger software is making this bug not appear. I'm going to find a remote host for the sample file soon. - thanks.

Update: A sample file is now hosted remotely here. http://www.filemonster.net/en/file/8663/IE-OrderedListBug-html.html

1. One One One One One One
2. Two Two Two Two Two Two
3. Three Three Three Three Three Three
4. Four Four Four Four Four Four
5. Five Five Five Five Five Five
6. Six Six Six Six Six Six
7. Seven Seven Seven Seven Seven Seven
8. Eight Eight Eight Eight Eight Eight
9. Nine Nine Nine Nine Nine Nine
10. Ten Ten Ten Ten Ten Ten

All you need to do, to get IE to break, is set the CSS width property on the OL element, and the LI elements (inline or in a CSS selector/class.

But wait! there's more!, if you don't add the CSS width to the LI elements, just the OL element, you get this, the "Chris Angel" Ordered List, where ALL the numbers disappear!

Example 2:

1. One One One One One One
2. Two Two Two Two Two Two
3. Three Three Three Three Three Three
4. Four Four Four Four Four Four
5. Five Five Five Five Five Five
6. Six Six Six Six Six Six
7. Seven Seven Seven Seven Seven Seven
8. Eight Eight Eight Eight Eight Eight
9. Nine Nine Nine Nine Nine Nine
10. Ten Ten Ten Ten Ten Ten

Known Workarounds: None.

Related Issues: None.

bug 312 - Anchor links klobber the page Title in IE

Issue: #312
Affects: IE7, IE8 Beta 1, IE8 Beta 2, IE8 PR1, IE8 RC1

We're not sure when this happened, but in IE7, if you type in a URL in the address bar that links to an anchor within a page (any element with a name or an id), it overwrites the titlebar erasing your designed name, with the URI to your page with the #anchorName appended.

Example:
Try it out, scroll to here!
Now, press Enter in the Address Bar, as if you just typed it.
Now look at the title bar.

Known Workarounds: None.

Related Issues: None.

bug 210 - No .innerHTML support on Table, THead, TBody, TFoot, Tr's in IE

Issue: #210
Affects: IE6, IE7, IE8, IE9 RC 1
MSIE Feedback ID: 336254 |
MSIE Feedback ID: 332545
Status: Microsoft has confirmed this will NOT be fixed in IE8 RTM

Back Story: Explanation as to why innerHTML doesn't work - by the guy that wrote it!


Internet Explorer generally works best, when you pass it new content via the .innerHTML property. This is mainly due to many bugs in the DOM methods that would otherwise be preferred. However .innerHTML has its own problems, and IE has some strange issues using .innerHTML.

In IE, you can not use .innerHTML to set the contents of a table ,thead, tbody, tfoot element, or a tr element, because IE makes them readonly (Problem Report | MSDN Bug data).

Known Workarounds: Three.

Option 1:
Using the DOM methods instead {createElement, appendChild, etc.}, but remember that in IE, although you can code your HTML documents with a (table > tr > td) structure, you can't do that when building the DOM in JavaScript in IE!

In IE, you must create the structure in this format (table > tbody > tr > td) note the tbody is required. IE will not throw any error if you omit it, but it won't render the content either (bug 171).

Option 2:
As Anonymous pointed out, you can wrap the table in a '<div>' element, and set the .innerHTML on it (don't forget a '<tbody>' element to wrap the rows though.

Option 3:
In a similar fashion, you can set the .outerHTML of the table element instead (same catch for '<tbody>' applies). The advantage here, is that you don't mess up your DOM structure which might upset any CSS rules that were not expecting a div. The big catch here though, is to remember that .outerHTML is a proprietary feature of IE, thus if you use this technique, you'll need to ensure that you are only applying this to IE, not globally to all browsers.

Related Issues: (bug 124), (bug 171).