The Firefox Input Button Line-Height Bug

Published February 25, 2010 by Rob Glazebrook.

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:

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:

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:

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.

93 Responses

  1. Pingback: Show Framework » firefox input line-height bug

  2. Gerda (reply)

    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.

  3. Pingback: 火狐下input按钮不支持line-height | csscabin

  4. Aliarth (reply)

    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.

  5. Thomas Gram (reply)

    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;

  6. Karolyn (reply)

    With havin so much content and articles do you ever run into any problems of plagorism or copyright violation? My website has a lot of exclusive content I’ve either authored myself or outsourced but it seems a lot of it is popping it up all over the web without my agreement. Do you know any solutions to help stop content from being ripped off? I’d truly appreciate it.

  7. Pingback: 表单button的行高问题,米高migaoo | 米高Migaoo

  8. wordpress.Com (reply)

    Thanks for every other wonderful post. The place else may anybody get that kind of information in
    such an ideal method of writing? I’ve a presentation next week, and I am at the look for such info.

  9. http://bevdillon.buzznet.com (reply)

    By following these tips, the buyers can expect tto pay
    anywhere from $92, 000 to $200, 000, but– MICHAEL car shop games PRICHINELLO:
    Was it? Although the Ruf Yellowbird from– well, I just couldn’t buy any of the other significant advantages of owning a new or used, something is
    definitely rotten in Denmark.

  10. pennystocksfordummies.net (reply)

    Selling a stock too late is worse than selling it too early.
    There is never a guarantee that your money would alsays work for you in the sttock market,
    no matter how good things may go for awhile.
    Tellecommunications service vedors today face sizeable obstacles in copijng with the
    fast-paced changes and thir iindustry rivals.

  11. www.gratsocial.com (reply)

    Hey I know this is off topic but I was wondering if you knew
    of any widgets I could add to my blog that automatically tweet my newest twitter
    updates. I’ve been looking for a plug-in like this for quite some time and was hoping maybe you would have some experience with something like this.
    Please let me know if you run into anything. I truly enjoy reading your
    blog and I look forward to your new updates.

    Feel free to visit my page social landings (http://www.gratsocial.com)

  12. a (reply)

    Link exchange is nothing else but it is just placing the other person’s blog
    link on your page at suitable place and other person will also do similar for you.

  13. http://lozkarehabilitacyjne.blog.pl (reply)

    Hi! This is kind of off topic but I need some guidance from an established blog.
    Is it hard to set up your own blog? I’m not very
    techincal but I can figure things out pretty fast. I’m thinking about setting up my own but I’m not sure where to start.
    Do you have any ideas or suggestions? Thanks

  14. katalog.di.com.pl (reply)

    I’m impressed, I have to admit. Seldom do I encounter a blog that’s both equally educative and entertaining, and
    without a doubt, you’ve hit the nail on the head. The issue is something not enough people are speaking
    intelligently about. Now i’m very happy that I came across this during my hunt
    for something regarding this.

  15. Hayward AX5500GA Gearbox (With Cmas Hose Ties) (reply)

    First off I want to say excellent blog! I had a quick question which I’d like to ask
    if you don’t mind. I was interested to know how you center yourself and clear your thoughts before writing.
    I have had difficulty clearing my thoughts in getting my
    ideas out there. I do enjoy writing but it just seems like the first 10 to 15 minutes
    are generally wasted just trying to figure out how to begin. Any ideas or hints?
    Cheers!

  16. Lauderhill (reply)

    From right here onwards the procedure is far more than easy.
    Consumers are concerned over range limitations, battery life, availability of charging stations,
    costs and so on. If your oxygen sensor is easy to remove yank it out, if not I wouldn’t take the time.

    Stop by my webpage … Lauderhill

  17. ชุดเดรส (reply)

    you’re really a just right webmaster. The web site loading velocity
    is incredible. It sort of feels that you’re doing any distinctive trick.
    Also, The contents are masterwork. you have done a
    great job on this subject!

  18. ทัวร์สิงคโปร์ (reply)

    Hey I know this is off topic but I was wondering if you knew of any widgets I could add to my blog that automatically tweet my newest twitter updates.

    I’ve been looking for a plug-in like this for quite some time and was hoping maybe you would
    have some experience with something like this.
    Please let me know if you run into anything. I truly enjoy reading
    your blog and I look forward to your new updates.

  19. livermore water heater repair parts (reply)

    Hello! Quick question that’s entirely off topic. Do
    you know how to make your site mobile friendly?
    My blog looks weird when viewing from my iphone 4. I’m trying
    to find a theme or plugin that might be able to correct this problem.

    If you have any recommendations, please share. Cheers!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>