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