difference between Firefox and Chrome padding
If your .button is a button
this might be a mozilla inner focus thing... try this?
.button::-moz-focus-inner { border: 0; padding: 0; margin:0; }
The focus-inner fix works but I also add negative top and bottom margins to get it to the right height. e.g.:
*::-moz-focus-inner {
padding: 0;
border: 0;
margin-top:-1px;
margin-bottom:-1px;
}
I used to love Firefox, but it has become a bloated mess and fell off my Christmas list years ago.
Firefox and Chrome render padding
exactly the same way. Your problem is elsewhere.
Are you using a reset CSS? If not, the default line-height
declaration might be interfering with the rendering of your button.
For one, your height
is way smaller than your font-size
. Since you don't have overflow
specified, your height
will always be extended to at least font-size
(or whatever your line-height
specifies).
If your .button
class is actually a <button>
element, also apply superUntitled fix.