Firefox displays button's padding incorrect

Question

Currently I'm creating a website and I have a little problem: only in Firefox button looks like this: enter image description here
Although, in the rest browsers button looks like this

You can watch it here http://router.kg/ubiquiti And another mistake I've noticed: every browser show button's padding like this

padding: 10px 20px 15px 20px;

Firefox shows only this:

padding: 10px 20px 15px;

Firefox v26.0

So, can anyone tell me where is the problem hiding?

score 1 · Answer 1 · edited May 23 '17 at 10:32

1

I guess you could write a css that specifically targets Firefox (in addition to the css that works on other browsers).

Check out how to do so here: Targeting only Firefox with CSS

edited May 23 '17 at 10:32

Community

1
1

answered Jan 12 '14 at 13:49

Ranveer

6,683
8
45
92

score 0 · Answer 2 · answered Jan 12 '14 at 14:10

you should remove height and use only padding to size height of button .

input.button {
  margin: 0;
  border: 0;
  width:10em;
  padding:0.5em;
  text-align:left;
  background:green;
  border-radius:0.5em;
  color:white;
}

http://codepen.io/anon/pen/Chvej

in your code you set height at 32px, wich doesn't allow button to grow over these 32px (different bomodel used by FF ?) but padding is still applied in FF

Firefox displays button's padding incorrect

2 Answers2