Question

I have a table based layout which is divided into four columns, the two of them for padding purposes. In most browsers it works fine, but at least on on IE9 in both normal and compatibility mode the cells aren’t the size they’re supposed to be.

I’ve tried defining the width as both attributes and CSS styles but neither seems to help. See fiddle for a demonstration.

I want:

+------------------------------------------+
|  320          | 20 | 39   |  320         |
|               |    |      |              |
+------------------------------------------+

I get: (rounded, values are decimals)

+------------------------------------------+
|  324          | 19 | 34   |  321         |
|               |    |      |              |
+------------------------------------------+

With the actual content instead of the placeholder stuff the difference is even more exaggerated, the leftmost column being 357 and the rightmost 299 pixels wide.

I originally had only two columns with padding on the edges, but switched to the current version as an attempted fix. It had no effect.

This is for an HTML newsletter so using a tableless layout is not an option.

Answer 1

I finally found a solution to the problem. The four cells themselves were fine, but this code containing the newsletter heading and ingress broke it:

<tr><td colspan="4">Some long text here</td></tr>

I changed it to this and it started working:

<tr><td colspan="4" width="700">Some long text here</td></tr>

The wide column’s width is 700px whether or not I force it, but if I don’t, the width of the single column cells gets messed up. I consider this a clear bug in IE.