Small Firefox input button CSS styling issue?

[ajcool123]

Hi Guys!

I have the following class defined for a submit button.

.InputButtonTest
{
width: 90px;
color: White;
background: #022F68;
height: 19px;
font-size: 13px;
border: 1px solid #022F68;
line-height: 8px;
}

The button looks good in IE7/8 + Chrome, however in Firefox it appears the text for the button value is being pushed down. I need to keep the actual pixel height of the element at 19px, but can someone suggest a fix for Firefox?

Thank you very much!

[dtm32236]

why line-height: 8px?

[ajcool123]

If you remove the line height in IE7/IE8 things get out of wack. Try it and let me know if you are seeing different results if you can.

Thank you very much!

[aj_nsc]

Agree with dtm's implication, get rid of the line-height and align the text using padding-top. Important to note, when you add a padding-top, this must be subtracted from the height value to maintain the 19px height of your button.

I would try this, for starters, but you might need to mess with it.


.InputButtonTest
{
width: 90px;
color: White;
background: #022F68;
height: 16px;
font-size: 13px;
border: 1px solid #022F68;
padding-top: 3px;
}

[ajcool123]

Thank you for the suggestion. Unfortunately a padding top just appears to push the text off the button. Are you seeing different results? Any other suggestions to get this worked out?

Thank you!

[aj_nsc]

My bad, buttons act differently (or at least appear to in my current testing/state of exhaustion) than what I was thinking. Replace padding-top with padding-bottom and it is the best you can do with a restricted 19px high button with 13px high text.

[jdavidson01]

Try this in your CSS if it is a <button>...

button::-moz-focus-inner { padding:0 !important; }

...or if it is an <input type="button">

input[type="button"]::-moz-focus-inner { padding:0 !important; }


Should fix the padding problem. ;)