Menu
I've searched now for almost half a day... but I couldn't find out why chrome6/7 seems to be the only browser in comparison to IE8/FF3.6/Opera that does not add the padding to the specified width of an table cell.
Of course this becomes crucial if you're working with table-layout:fixed, due to the fact that all of a sudden they have to pay attention to the specified px widths.
Okay finally my question: does anyone know why Chrome calculates differently, and which browser is right (standard conform), and hopefully, is there an elegant solution?
At the moment, my only solution would be a conditional comment with a chrome.css where I add the padding to the width manually ... shiver...
(btw: anyone who feels tempted to tell that px widths are not proper webdeveloping... feel free to leave this page silently)
ADDITION: (in respect to the replys)
first of all thank you for your immediate replys... i was trying to make it as short as possible, and there for i reduced the facts to the minimum... but, as you mentioned, there are a lots of varibales in webdeveloping and so i try to clarify...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4 /strict.dtd">
<html>
<head>
<style type="text/css">
div { width:300px; }
table { table-layout:fixed; width:100%; height:50px; }
td.col1 { width:20px; background-color:blue; }
td.col2 { width:40px; background-color:red; }
td.col3 { width:60px; background-color:yellow; }
td.col3 { width:auto; background-color:yellow; }
td { padding:5px; }
</style>
</head>
<body>
<div>
<table cellpadding="0" cellspacing="0">
<tr>
<td class="col1"></td>
<td class="col2"></td>
<td class="col3"></td>
<td class="col4"></td>
</tr>
</table>
</div>
</body>
now if you toggle the css line
td { padding:5px; }
in different browsers, you'll see that chrome includes the padding, within the width, while the others add it
hope thats helps to clarify and thanks in advance
berny
654
I have the same problem and, unfortunately, I didn't find a real solution, but I found two other threads, a bug report + a work around.
Threads:
Table-layout:fixed rendering differences in Safari
Webkit browsers not accounting for padding when determining cell width in table-layout:fixed
Bug report:
https://bugs.webkit.org/show_bug.cgi?id=13339
Possible solution: see second thread.
143
I have tried reproducing your problem, but the following looks exactly the same to me in Chrome 7 and Firefox 3.6:
<!DOCTYPE html>
<style>
table { table-layout: fixed; border: 1px solid black; }
td { width: 5px; background: green; outline: 1px solid red; padding: 5px; }
</style>
<table>
<tr><td></td><td></td></tr>
</table>
To solve your problem, I would recommend you first try adding a doctype if you don't already have one. Using a doctype will trigger standards mode, which mean that behavior is more likely to be consistent between browsers. The one I use above, <!DOCTYPE html>, is the HTML5 doctype, but it actually works to trigger standards mode in pretty much all browsers.
If standards mode doesn't help you get better consistency, then try reducing your problem down to a minimal example; strip away everything extraneous, until you are left with only enough to see your problem. The example I gave above shows how minimal I mean; just enough markup and styling to be able to easily see the tables and compare them between browsers. Once you reduce to a minimal example, you may see the problem yourself, or if not, you will have something that you can post on a forum like StackOverflow and get much more useful answers, as people don't have to guess as to what your problem is, or wade through a whole page worth of HTML and CSS just to find the one little issue you were mentioning.
35
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
