Menu
I've broken this down to a fairly simple example.
For me, it looks different in Chrome 7.0 than it does in Firefox 3.6.12. IE 9 beta looks like Chrome.
I'd like to be able to set padding on the TD, and have it render with the same height in all browsers. Currently, with the 10px top padding, the cells in Chrome look taller than in Firefox.
I've tried using Eric's reset css, it doesn't change the result Any ideas why these are being rendered differently?
An example of how it looks is here - http:// yfrog. com/5zqa7p
And the Code...
<!DOCTYPE html>
<head>
<title>padding test</title>
<meta charset=utf-8>
<style>
td { width: 100px; height:100px; background: green; padding: 10px 0 0 0; }
</style>
</head>
<body>
<table>
<tr><td>TEST</td></tr>
<tr><td>TEST</td></tr>
</table>
</body>
821
Cell padding is the space between cell borders and the content within a cell. To set cell padding in HTML, use the style attribute. The style attribute specifies an inline style for an element. The attribute is used with the HTML <table> tag, with the CSS property padding.
Answer: Use the CSS padding & border-spacing property As we know the table's cellpadding and cellspacing attributes are removed in HTML5. But, you can still set padding inside the table cells easily using the CSS padding property.
The cell padding attribute places spacing around data within each cell. The cell spacing attribute places space around each cell in the table.
It specifies the space between the border of a table cell and its contents. It specifies the space between adjacent cells. It is created by using HTML <table> tag but type attribute is set to cellpadding. It is also created by using HTML <table> tag but type attribute is set to cellspacing.
There's apparently a bug in the way Firefox and Chrome handle padding in table cells in HTML5: http://code.google.com/p/chromium/issues/detail?id=50633
When you try your markup and CSS with 0 padding, they're the same. When you switch the DOCTYPE to be not HTML5 they are the same as well.
59
For HTML5 some browsers add 2px to table cells with images if line-height is default. It's flagged as a bug, don't expect it to always be like this.
table { line-height: 0; }
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
