I recently ran into a bug in Firefox and Opera when I tried to set the line height of text inside a button (which affects input “submit” buttons as well as the HTML button tag). The bug? The line height can’t be changed!
For example, take the following code:
1 2 3 4 5 6 7 | input#button { border: 2px solid #06f; color: #06f; background-color: #6cf; font: bold 12px Arial, Helvetica, sans-serif; line-height: 50px; } |
In a perfect world, this code would be a quick and easy way to vertically center text inside a button and set the button’s height, since text is always centered inside of the space created by its line-height.
But the results are inconsistent. Chrome, Safari, and (I can’t believe this either) Internet Explorer 8 all center the text and resize the button just like I’d expect. But the results are less than perfect in Firefox and Opera (see the image above).
The Problem, Defined
A quick look at Firebug proves enlightening: even though I’ve specified a line-height of 50px, Firefox is using a line-height of 15px instead.
So what gives?
It seems our bug isn’t really a bug at all, but a “feature”: that is, it’s a deliberate decision by Firefox to limit line heights on buttons. This is evidenced by this line of CSS in Firefox’s default CSS:
1 2 3 | button, input[type="reset"], input[type="button"], input[type="submit"] { line-height:normal !important; } |
Basically, Firefox is setting the line-height to “normal” on buttons and is enforcing this decision with an !important declaration. This is a frustrating decision on their part, particularly considering (as Eric Meyer has pointed out at great and detailed length), line-height: normal is anything but.
And while trying to work around this rule, I discovered something that makes the situation a little more dire: browser-defined !important rules cannot be over-ruled by author-defined !important rules. This rule cannot be overruled by a CSS file, an inline style — anything.
So what’s to be done?
After a couple of hours of teeth-gnashing, I’ve settled on the following as an acceptable workaround. Instead of using line-height, use padding.
So to take the example from earlier, we’d convert it to look like this instead:
1 2 3 4 5 6 7 | input#button { border: 2px solid #06f; color: #06f; background-color: #6cf; font: bold 12px Arial, Helvetica, sans-serif; padding: 18px 6px; } |
This effectively centers the text inside our buttons, but it isn’t ideal. It means there’s no easy way to ensure our buttons are using the same line-height as the rest of our content, and it means the size of the button can’t be dependent upon the size of the button text. But I’ll take what I can get on this one.
On February 26, 2010
4:43AM
Arjan said:
Interesting article since I’ve run into this problem more than once myself.
Thanks for sharing!
On February 26, 2010
4:49AM
art said:
never tried to use line-heigh for buttton, but thanks you for publish this bug
On February 26, 2010
5:06AM
GoOz said:
Yeah, padding can help to simulate a line-height if you want to increase height.
Unfortunately, if you to decrease it… you’re screwed, negative padding doesn’t work.
Never found a solution to this case. :/
On February 26, 2010
8:30AM
Jordan Walker said:
Great find. That is really helpful! Thanks
On February 26, 2010
8:50AM
Dave Woods said:
I’d always use padding for something like that anyway. Otherwise you might run into a few problems if your buttons are dynamic and split onto two lines or if the user wants to increase their font size in their browser. Padding is definitely the most flexible solution in this situation :)
On February 26, 2010
9:14AM
Mark said:
i ran in to the same problem a long time ago, the easy-est solution is to use a firefox only hack en set the height (you have to specify the samen height accordig to your line-height) 2px smaller & add the same amount back with padding:
for buttons from bottom, for text-input from the top
On February 26, 2010
11:16AM
Rakesh said:
This is really good finding. Thanks for knowledge sharing.
On February 26, 2010
2:24PM
Wordpress Themes said:
Dam, so that was the problem. I was having this issue a while back when designing a search button so I removed the line-height and of course used padding, which was the only other simple solution. Well, its nice knowing that the problem was FF and not me. :)
On February 27, 2010
8:00AM
Mladen said:
you can add height property beside line-height…
input#button {
border: 2px solid #06f;
color: #06f;
background-color: #6cf;
font: bold 12px Arial, Helvetica, sans-serif;
line-height: 50px !important;
height: 50px; //extends height in firefox, making basically the same effect as line-height in other browsers
On March 02, 2010
5:06PM
Justin said:
This is bug 349259 in Bugzilla:
https://bugzilla.mozilla.org/show_bug.cgi?id=349259
On March 04, 2010
1:17PM
Hoxxy said:
Can’t say i’ve come across this problem before though I always make mistakes with button padding ..lol
On March 08, 2010
7:53AM
Robert said:
Interesting bug. Has Mozilla said anything about fixing it?
On April 12, 2010
11:07AM
Giulio D'Ambrosio said:
The same problem applies to input text fields…. the padding workaround can work, but it’s not the same thing…. i’m upset about this thing….
On May 03, 2010
3:31AM
Liviu Anghelina said:
Yep, this happened to me also…Was quite annoying, although Firefox 3.6 fixed this bug, this is available for FF 3.5 or under! Padding is the key of resolving this little bug :P
On May 26, 2010
2:47AM
Bob Spryn said:
This isn’t fixed in FF 3.6…
Check out line 99 in the source code:
https://hg.mozilla.org/mozilla-central/file/063f18ccd02f/layout/style/forms.css#l99
On July 08, 2010
2:29PM
Domenic said:
The good news is that they seemed to have fixed that issue in 3.6.
On July 20, 2010
10:04AM
Trish said:
The fix in your article is no longer needed for Firefox… though I did have to use:
{
overflow:visible;
}
html>/**/body input.button
{
overflow:auto;
}
to get rid of the padding at both ends of the css created buttons. That fix worked in both IE and Firefox browsers.
Now only the padding height IS a problem in these browsers.
I have tried line height to fix the added height in my buttons, and padding… but NOTHING works. In fact IF I add padding OR height (even 0) to my style sheet Firefox adds even more padding while IE ignores the info.
Any suggestions?
On August 03, 2010
7:56AM
Webdesign Alkmaar said:
I just ran into this issue as well and was astonished that even IE8 behaved, but Firefox gave trouble. For the life of me I couldn’t figure out what was happening, until I found your post. Thanks for sharing!
On August 14, 2010
9:00AM
Vali said:
http://www.datingcastle.com/phpLD4/
As long as the link is available, you can see here that the bug doesn’t exist (see the source). I couldn’t do that myself, it’s wired. WTF.