0

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

TheGarden
  • 193
  • 1
  • 1
  • 12
  • Flagged for "off-topic": Desired behavior can be found by looking at the link provided in Chrome. I want the text to float center, and to align center. It is not doing so in IE/Firefox. As for shortest code necessary to reproduce the problem, that's tough as I'm using bootstrap (as mentioned) and my SASS file is pretty large and varied for each instance of the button class depending on page. Steve seemed to understand my problem. However, I'm still struggling to get the ABOVE desired behavior... – TheGarden Jul 28 '14 at 04:59

1 Answers1

3

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.

Steve
  • 31
  • 3