Edit Question - KnowledgeHub

Title Body

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); }

Tags (comma-separated) Cancel