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.
Very interesting subject, regards for putting up.
There may be noticeably a bundle to learn about this. I assume you made certain good factors in features also.
Well, it is decent, however how about additional choices we have here? Would you mind making one more post regarding them too? Thanks!
Pingback: Show Framework » firefox input line-height bug
I still dont get it how you do it
btw happy new year
Did you know that more than ten people a year are killed by vending machines.
Aw, this was a very nice post. In concept I would like to put in writing like this additionally – taking time and precise effort to make an excellent article… but what can I say… I procrastinate alot and not at all appear to get one thing done.
bookmarked!!, I really like your website!
Pingback: 火狐下input按钮不支持line-height | csscabin
The 15px line-height restriction can actually be disabled.
Solution here: http://stackoverflow.com/a/1986666
Thanks for documenting the problem. It narrowed down my debugging process.
Yea. Firefox not fixing bug’s. They just chreating more bug’s ant giving for Web builders more problems. I hate firefox, that browser badest browser whot i seen.
thanks, that really helps
firebug on chrome is more useful then on firefox
strongly recommend it
Yes I know that more than ten people in a year are killed by vending machines.
Hello would you mind stating which blog platform you’re using? I’m going to start
my own blog soon but I’m having a hard time selecting between BlogEngine/Wordpress/B2evolution and Drupal. The reason I ask is because your design seems different then most blogs and I’m looking for something completely unique.
P.S My apologies for being off-topic but I had to ask!
My partner and I stumbled over here coming from a different
web address and thought I should check things out.
I like what I see so now i’m following you. Look forward to looking over your web page again. Name is THIAGO I am from Billings
Hey there! Quick question that’s completely off topic. Do you know how to make your site mobile friendly? My website looks weird when viewing from my iphone. I’m trying to find a template or plugin that
might be able to resolve this issue. If you have any
suggestions, please share. Thank you!
Hello!
Don’t forget to assign the line-height property for other browsers.
border: 2px solid #06f;
color: #06f;
background-color: #6cf;
font: bold 12px/16px Arial, Helvetica, sans-serif;
padding: 18px 6px;
Hi there i am kavin, its my first occasion to commenting anyplace,
when i read this post i thought i could also make comment due to this sensible post.
Have you considered including a few more videos
with the post? I like a quality article as much as the next guy or girl, but I am a visual type of guy and I like to be
SHOWN in lieu of being told, you get what I
am talking about? No biggie, just a advice. Awesome site by the
way.
I’m really inspired together with your writing abilities and also with the format for your weblog. Is this a paid subject or did you customize it your self? Either way stay up the nice quality writing, it’s rare to peer a nice blog like this one
nowadays..
It’s a pity you don’t have a donate button! I’d certainly donate to this excellent blog! I guess for now i’ll settle for book-marking and adding your RSS feed to my Google account.
I look forward to brand new updates and will talk about this blog with my Facebook group.
Talk soon!
Here is my blog: free nfl jersey
Excellent site. Plenty of useful information here.
I’m sending it to several friends ans also sharing in delicious. And of course, thanks on your effort!
Here you can download plenty of stuff: http://www.downloadprovider.me/?aff.id=4249