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

Answer 1

I had the same problem and I've solved (only for FF and Safari) by fixing the width but not the height and playing with the values: padding (top and bottom), line-height and if needed setting the vertical-align to middle. However all it's more easy to do if you set all the values (even the font size) in pixel.

---

EDIT: I think that there isn't a cross-browser solution, because the problem is due to the text rendering of the browsers. To solve completely the problem you could draw a background img with text and apply that image to the link or the button. Even if with this solution you lose in accessibility.

Alternatively you can use conditional CSS statements to improve the layout for each browser.