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 have same problem every time I need to style form buttons. Sorry, quite busy at the moment so only brief description how I usually fix it.

In FF Text is usually a bit lower, exactly like on the image you attached and so then I simply apply "padding-bottom" on the button itself. It moves the text on the button number of pixels up.

The problem is it also moves text in IE and now IE looks a bit off. To fix that I apply "line-height" to the same button with exactly same value as the height of the button. That makes IE to ignore padding completely and positions the text right in the middle. Below is sample HTML code:

and CSS:

.search
{
    background: transparent url(../images/sprites.gif) no-repeat -310px 0; /* some button image */
    height: 29px;
    width: 104px;   
    border: 0; 

    /* centering text on button */
    line-height: 29px; /* FF will ignore this but works for IE. This value should be same as value of the height property above */
    padding-bottom: 2px; /* IE will ignore but works for FF */
}

Sorry I didn't applied it directly to your code but I'm a bit busy at the moment, hope you got the idea and it helps though.

ps. just checked in IE8 and all above moves text few pixels up. So it means more (endless?) mocking around with padding top/bottom.. I lost my patience now though and I think I'll be putting all this in separate stylesheet from now on that is until I find some fairly easy and universal solution for all this