Should centered background respect paddings

Question

Here is a snippet (if you are using Opera, check out this link). As we can see In webkit browser we can see that background image respects padding while centering, and in (at least Firefox and Opera) things go different.

here it is webkit non-webkit

So, the question is following - what behaviour is actually correct, and, far far more important, how can I unify layout?

UPD: don't waste your time trying to find appropriate rule in notorious css reset sets, since I've already tried )))

First of all do you use a css reset? A common one is Eric Meyer's. http://meyerweb.com/eric/tools/css/reset/reset.css — chchrist, Jan 16 '12 at 14:01
By applying a css reset you will have a unified layout to work with — chchrist, Jan 16 '12 at 14:12
I am not answering , I am asking in order to verify that you use a css reset... — chchrist, Jan 16 '12 at 14:28
@chchrist - deleted comment, will edit the question to makes thing clearer. — shabunc, Jan 16 '12 at 14:43
@Nacho, my bad, dabblet uses CORS, that's the reason it won't work in currunt Opera, so, here is link for Opera - http://dabblet.com/result/gist/1620842 - will fix question. Thank you! — shabunc, Jan 16 '12 at 16:18
Well that's an interpretation of table cells problem. Each navigator actually treats it differently... have you tried other doctype rather than ` `, like ` `? — I.G. Pascual, Jan 16 '12 at 16:41

rgthree · Accepted Answer · 2012-01-16T18:21:21.780

1

You're problem isn't the background-origin it's the box-sizing.

Looks like webkit's box-sizing is content-box and mozilla's is border-box making webkit's cell-height 242px (height + padding + border) and mozilla's 200px. And since your vertical background position is centered, it's creating extra vertical space. Simply set box-sizing:border-box for consistency between the two modern browsers.

~~Here's a new one: http://dabblet.com/gist/1621656~~

EDIT: While the above fixes Chrome (webkit), it does not seem to fix Safari 5.1 (webkit). It appears that each browser has a buggy implementations of the box-sizing property for table-cells. In fact, if you even look at the Notes section of the MDN it says box-sizing isn't even applied in Mozilla.

Therefore, we must solve your height issue a different way. Good news, according to the CSS2.1 Spec we should be able to define the height we want from the TR. Here's a new that works in my Safari, Chrome and Firefox versions: http://dabblet.com/gist/1622122

edited Jan 16 '12 at 18:21

answered Jan 16 '12 at 16:33

rgthree

7,217
17
21

thank you for this answer, but are you sure. border-box was first thing I've tried, to be honest. In my browsers (Safari/Firefox) there is exactly the same issue, yet unresolved. There IS a gap in webkit, and there is NOT - in non-webkit browsers. – shabunc Jan 16 '12 at 16:42
Hmm.. you're right, Safari was broken (Chrome was fine, though). Even so, it is the height (via box-sizing) that is your problem (you can see in your screenshot how webkit's cells are taller b/c of the padding). The solution w/o using box-sizing is to set the height in the table row, rather than the cells. I've edited my answer. Hope that helps. – rgthree Jan 16 '12 at 18:22
@rghtree, that's something. Me also came up to conclusion that the reason is just that box-siing is just not fully implemented. I guess this is the closest I could get. Thanks a lot. – shabunc Jan 16 '12 at 21:02

Should centered background respect paddings

1 Answers1