html table border always appears in IE8

Question

I am rendering a html table using javascript & jQuery. The aim is to show a colored box (table with colored td) if there is a color supplied by parameter. If not then show nothing (so i am showing empty table with  ). But for both these cases I do not want to show any border. I want a flat color box / empty white box.

if (colors == null || colors == '') {
    return '<table border="0" style="none" cellpadding="0" cellspacing="3"><tr><td>&nbsp;</td></tr></table>'
}

In IE 6 and 7 I can see boxes with no border, but in IE 8 it always shows a border to these table td's even if I mention Border="0". It looks like a 3d cell.

Is there any alternative for IE8? Same code works fine in other versions.

Answer 1

This does not look very healthy. You should not use border="0". style="none" is really myterious, since CSS is meant to be inside. none is not valid CSS, since CSS-properties are specified in key/value-pairs. I recommend this:

<table style="border:0px;" cellpadding="0" cellspacing="3"><tr><td>&nbsp;</td></tr></table>

You should consider to extract your CSS into external files. Be unobstrusive.

Answer 2

Per elusive's comment, "You should consider to extract your CSS into external files", I'd try adding a class on the table and setting border styles in an external stylesheet.

<table class='no-border' ...><tr><td>&nbsp;</td</tr></table>

And in the style sheet:

.no-border, .no-border td { border:none; }

The .no-border td might be the rule you need to solve the problem you're seeing, if the border is being set on a single cell and not the whole table.

(If you want to try it inline first, try <td style="border:none;"></td>.)