Question

So I’m using the following CSS to create a button style;

.button {
    display: inline-block;
    outline: none;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    font: 14px/100% Arial, Helvetica, sans-serif;
    font-weight:bold;

    text-shadow: 0 1px 1px rgba(0,0,0,.3);

    padding: .5em 2em .55em;

    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
    box-shadow: 0 1px 2px rgba(0,0,0,.2);

    -webkit-border-radius: .5em; 
    -moz-border-radius: .5em;
    border-radius: .5em;
}

That combined with some other classes to add colour and give hovering and press effects works great.

I’ve applied this style to various html tags across the site;

<span>
<a href>
<button>
<input type="button">
<input type="submit">

All of them look great and work great in Chrome and (amazingly) IE7-9 (less so in IE7-8 but ok).

But in Firefox the input type tags appear almost twice the size of the a href type ones. Whats causing this?

Here is an example.

Answer 1

Well, I used a combination of all three suggestions from Pablo Rincon, ThomasK and beanland.
None of them helped in isolation but together they all seem to work!

Added a CSS reset, not all of them worked but found this one; http://github.com/necolas/normalize.css

Changed the em’s to px’s.

Set line-height on .button to 17px.

Perfect. Cheers.