input type=submit text vertical alignment in Firefox

Question

I'm trying to style my form buttons and I'm experiencing a problem in Firefox that I can't get to the bottom of...

I want to style certain <a />s and <input type="submit" />s to look the same (I have a button background image, using a sliding-doors technique to apply a hover effect.)

This all works great, except in Firefox, the input submit text is slightly lower down than it should be. IE and Safari/Chrome work fine.

_{(source: muonlab.com)}

Anyone got any ideas?

Thanks

<div class="buttons">     <a href="#" class="button btn-small-grey">&laquo Back</a>     <input type="submit" class="button btn-large-green" value="Save changes" /> </div>  .button {     cursor: pointer;     border: 0;     background-color: #fff;     color: #fff;     font-size: 1.4em;     font-weight: bold;     outline: 0;     font-family: Arial, Verdana, Sans-Serif; }  a.button {     display: block;     float: left;     text-align: center;     text-decoration: none;     padding: 5px 0 0 0;     height: 22px;     margin-right: 1em; }  .btn-small-grey {     height: 27px;     width: 96px;     background-position: 0 -81px;     background-image: url(/assets/images/buttons/buttons-small.gif); }  .btn-large-green {     height: 27px;     width: 175px;     background-position: 0px -54px;     background-image: url(/assets/images/buttons/buttons-large.gif); } 

Answer 1

I found this post because I had resolved this problem a few months ago and when I ran into it again today, I couldn't remember what I'd done. Nice. After poring over my css I finally located the "fix". I can't take credit because I found it on the web somewhere, but hopefully it will be as useful to you as it has been for me:

input::-moz-focus-inner /*Remove button padding in FF*/ {      border: 0;     padding: 0; } 

I hope this helps.