CODEWITHSUNDEEP
csshtmlhtml-tablecross-browserpadding
kolcun
kolcun

Reputation: 183

HTML5 Table cell padding - different in browsers

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>

Upvotes: 18

Views: 23739

Answers (6)

Mayeenul Islam
Mayeenul Islam

Reputation: 4762

I found browser-specific CSS (from here) for Firefox is a bit descriptive like:

background-color:#447d9a;
background-image:url('img/bg.jpg');
background-repeat:repeat-x;

So, I think, for firefox, padding can be descriptive rather brief (padding:10px 0 0 0;):

padding-top: 10px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;

It's a solution (or can be a solution) only for Firefox; and can work for the other browsers to debug specifically.

Upvotes: 1

gkond
gkond

Reputation: 4274

Actually, this behavior is caused by different defaults of box-sizing values on TD elements. Take a look at the spec: http://www.w3.org/TR/css3-ui/#box-sizing0

Box-sizing is luckily supported on all major browsers, see http://caniuse.com/#search=box-sizing

But there are issues in browsers preventing you from overriding default box-sizing value, especially when you are working with TD, the behavior is almost unpredictable across browsers.

In this JSFiddle example the most stable behavior across browsers is shown by border-box and content-box on a DIV element.

So just avoid using padding when height is fixed, and instead just wrap TD contents with additional padding container as a simple and bulletproof workaround.

Hope this helps!

Upvotes: 4

4michaelcoleman
4michaelcoleman

Reputation: 153

It should be written like this padding: 0 10px 0 10px; otherwise browsers wont fully support the dimension.

Upvotes: 1

羅怒奈折馬
羅怒奈折馬

Reputation: 137

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; }

Upvotes: 9

Robusto
Robusto

Reputation: 31883

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.

Upvotes: 15

Kyle
Kyle

Reputation: 67194

td { padding: 10px 0 0 0; }

This says: padding-top: 10px;, replace the 10px with 0 and hopefully it'll be the same. This means that Firefox and IE9 are not accounting for padding. (I think)

Upvotes: 2

Related Questions