CODEWITHSUNDEEP
htmlcross-browserrendering
patmortech
patmortech

Reputation: 10219

Table-layout:fixed rendering differences in Safari

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.

Upvotes: 11

Views: 10168

Answers (5)

Curtis Yallop
Curtis Yallop

Reputation: 7329

I made a Kendo grid have table:fixed-width. All the columns disappeared but only in Safari. Upon inspection, the td elements all have a computed style width of -3px. If I remove table:fixed-width, it's fine. If I specify custom pixel widths (but not percentages), it's fine. If I disable every style applied from every css source I can find (in the console style tab), the problem is not fixed it and nothing there sets width -3px.

So I have to either set all the column pixel widths or else not use table:fixed-width.

Upvotes: 0

Muir
Muir

Reputation: 442

In buggy webkits, table-layout: fixed also gives your table cells box-sizing: border-box. One alternative to browser detection is explicitly set box-sizing: border-box to get consistent behavior across browsers, then adjust your widths and heights accordingly (widths and heights must be increased to include padding and borders).

#my-table td {
  box-sizing: border-box;
}

Upvotes: 6

John Magnolia
John Magnolia

Reputation: 16803

I was able to get around this problem by removing the padding from the <th> with the fixed width. You can then safely add padding to the <td>

Upvotes: 4

patmortech
patmortech

Reputation: 10219

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.

Upvotes: 1

Kyle Hotchkiss
Kyle Hotchkiss

Reputation: 11112

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

Upvotes: 0

Related Questions