bug 163 - no valign in table cells in IE8

Issue: #163
Affects: IE8 Beta 1
Fixed in: IE8 Beta 2
MSIE Feedback ID: 333908


A regression bug has been found in IE8 (Beta 1) whereby it is impossible to set the valign attribute of a TD or TH cell.

No matter what you try to set this to: valign="top", valign="middle", valign="bottom" it will always set it to behave as "bottom".

Example:

top	middle	bottom
top	middle	bottom

Known Workarounds: None.

Related Issues: None.

Bug/Site Feedback |
Submit a bug

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

bug 171 - dynamic table DOM gotcha in IE

Issue: #171
Affects: IE6, IE7, IE8

When HTML first came out, the HTML Table was a simple element consisting of a <table> tag, with n <tr> tags, each with n <th> or <td> tags in it.

The specification grew, to include a tag called <tbody> (among others) to help group sets of rows within a table.

Browsers allowed for both implementations, either with the optional tbody section or not.

However Internet Explorer did something strange... they actually started to follow the spec (even though they miss the mark almost everywhere else).

In IE using the DOM, if you try to add <tr> elements to a <table> using the .appendChild() method, you MUST add a <tbody> section first. IE will not throw any errors if you do not, but it will also not render any rows/cells in your table either.

Known Workarounds: One. Always add the tbody section, and be sure to expect it when navigating this table in the DOM later on.

Related Issues: None.