CODEWITHSUNDEEP
cssfirefox
eoLithic
eoLithic

Reputation: 883

Firefox displays button's padding incorrect

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
enter image description here

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?

Upvotes: 0

Views: 78

Answers (2)

G-Cyrillus
G-Cyrillus

Reputation: 105903

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

Upvotes: 0

Ranveer
Ranveer

Reputation: 6863

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

Upvotes: 1

Related Questions