Home/ Questions/Q 7060559
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-28T04:22:02+00:00

Here is a snippet (if you are using Opera, check out this link). As

  • 0

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 )))

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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

    • 0