Position of text in a submit button

Question

The position of the text on the search submit button on my blog is very low in Firefox 4, but not Chrome 10 or IE9. I\'ve tried almost everything, and nothing works except l

Answer 1

I ran into the same. I was able to solve my issues, pushing padding from the bottom (!)

padding: 0 0 2px 0; /* total height: 36px */
height: 34px;   

or, in a bigger picture, if you fancy consistent input['..'] and anchor button, use distinct overriding tweaking for the latter for full control.

/* general button styling for input and anchor buttons */
.buttonXS, .buttonS, .buttonM, .buttonL  {
    display: block;
    font-size: 14px;
    line-height: 14px; /* just a precaution, likely ignored in FF */

    padding: 0 0 2px 0; /* total height: 36px */
    height: 34px;   
    ...
}

/* distinct vertical align for anchor buttons */
a.buttonXS, a.buttonS, a.buttonM, a.buttonL  {
    padding: 12px 0 0 0; /* total height: 36px */
    height: 24px;
}

(the 'T-shirt-sizes' lead to different background-offsets and widths elsewhere)