Table-layout:fixed rendering differences in Safari

Question

Basically the problem I have is that in Safari/Chrome it is changing the width of my columns even though I have specified a) a width on the table, b) table-layout:fixed, and c) specific widths on my first row that when added with the padding and border values add up to the width of the table specified. In IE7 and Firefox 3 the table is rendered the same. But in Safari/Chrome it decides to make the second column bigger by taking space from the other columns.

Any ideas? I have a very simple sample page that you can look at, as well as an image showing how the table is rendered in all three browsers for comparison.

Answer 1

Have you tried loading some Reset CSS? http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/

Answer 2

After looking around, I think that this is caused by the following webkit bugs: 13339 and 18565. Basically a problem with how it uses the border and padding values in calculating the final width of the columns.

I ended up doing some browser-sniffing and setting some different css values based on that for webkit browsers so that the final rendering was the same as FF and IE.