Internet Explorer 8 in compatibility mode ignores cellpadding

Question

I have a fairly complex page which contains an absolutely positioned table (as the last element in body). The table is created dynamically using jQuery. No matter how I specify the cellspadding attribute, it IE8 in the compatibility mode ignores it. There are several indications as to why it's being ignored:

• The layout is off by exactly the default padding (2px).

• In the IE Developer Tools dock, the property is presented as "cellpadding" (all lowercase) whereas the cellspacing attribute is presented as "cellSpacing", and if I change its value under the Attributes tab to 0, layout gets fixed and the name is changed to "cellPadding".

As I said, it’s a fairly complex page (read "messy") full of ads and content glued from several sources. I plan to do some more investigation, but I was wondering if somebody has encountered the same problem before. It must be some edge case possibly caused an invalid markup resulting in this misinterpretation.

Answer 1

To start with, maybe you should check the same page on IE 7.0 in order to find out if the "error" is due to how IE 7.0 handles it, or if it's a bug in IE 8.0's compatibility mode.

Depending on the result you can do the following:

1. Same error in IE 7.0: Find a way to handle it.

2. Error only in IE 8.0 compatibility mode: Report the bug / find a way to handle it without letting the fix affect IE 7.0 users.

3. Error only in IE 8.0 compatibility mode: Do nothing, nobody is using IE 8.0 in compatibility mode.

Answer 2

It turned out that the problem was caused by a bug in jQuery (or at least it looks like a bug, unless there are some other reasons I don't see). I filed it in jQuery bug tracker: #4978. To make the long story short, jQuery handles cellspacing in a special way and converts it to cellSpacing prior setting its value. It does not do the same thing for cellpadding. This causes a problem for IE7 because the setAtribute() function is by default case-sensitive (in IE7).