Firefox/IE Padding/Margin Fix [closed]

Question

beautiful people,

For the life of me I can't get my buttons to format properly in IE and Firefox, using Bootstrap. I've looked around for people with similar problems on here but I can't seem to lick this one. Any help would be greatly appreciated. I've made this site in MeteorJS in case that provides any insight for you out there:

http://jdd.meteor.com/search

*It works fine in Chrome, Safari, iOS devices...

Answer 1

---

I've made a reduced version of your form. My method for solving this problem is using the enforced line-height of firefox as your basis for applying styles. The default is normal from what I remember.

So using that you don't have to set a height and line-height to match that, this for me has been the most consistent solution cross browser without any weirdness.

I use the prefixed appearance rules as that removes all default browser styling applied to that element. It's especially needed in Mobile Safari.

http://codepen.io/stevemckinney/pen/CLgdE

input {
    -webkit-appearance: none;
    -moz-appearance: none;
    border: none;
    background: #EFEFEF;
}

input,
.btn {
    line-height: normal;
    padding: 10px;
}

.btn {
    text-decoration: none;
}

.btn-primary {
    background: #820024;
    color: white;
}

Hopefully this helps.