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.

184 Responses

  1. extract rar file free (reply)

    I love your blog.. very nice colors & theme.
    Did you create this website yourself or did you hire someone to do it for you?
    Plz answer back as I’m looking to create my own blog and would like to find out where u got this from.
    thanks a lot

  2. youtube - broadcast yourself george strait (reply)

    Also, the interface of the You – Tube is available in 54 different language versions.
    However, with that in mind, Grouper is an online
    video website that is continuing to increase in popularity.
    Here are a few usage stats that may convince you: The Google-owned You – Tube Video website now attracts more than 800 million unique users
    per month, and accounts for more than 3 billion hours of You – Tube Video watched on You – Tube per month.

  3. free movies online (reply)

    Watching online movies is the one of the newest web trends that is increasing with each passing day.
    Include some digital swag in your entertainment promotions campaign if you are sponsoring a
    special event. Internet has become the first and
    foremost choice of movie freaks, as through this way not only they can watch
    their desired movies via streaming way online, but they
    can also easily and quickly access much more interesting stuff concerning movies.

  4. free mobile game (reply)

    What’s Happening i am new to this, I stumbled upon this I’ve
    discovered It positively helpful and it has helped me out loads.
    I am hoping to contribute & aid other customers like its helped me.
    Great job.

  5. Pingback: 如何保证各浏览器下 <input><button><a> 定义的按钮尺寸一样? | segment-解决方案

  6. location matrimoni brianza (reply)

    This company has a goal and that is to produce a film
    which is a lovely alternative to the typical wedding video.
    Asian Wedding Photographers are one of the top wedding
    photographers in London. In the modern era, marriage has become
    an agreement for most couples, thereby making it more temporary than it was in the past.

  7. Nike Free Run 2 (reply)

    I know this if off topic but I’m looking into starting
    my own blog and was curious what all is needed to get set
    up? I’m assuming having a blog like yours would cost a
    pretty penny? I’m not very internet smart so I’m
    not 100% certain. Any tips or advice would be greatly appreciated.
    Many thanks

  8. water damage window carpet cleaning in san francisco ca (reply)

    hello there and thank you for your information – I have certainly picked up something new from right here.
    I did however expertise a few technical issues using this web site, as I experienced to
    eload the site a lot of timees previous tto I could get it to load correctly.
    I had been wondering if your hosting is OK? Not that I’m complaining, but slow loading instances times will often affect your placement in google and can damage yolur high quality score if advertising andd marketing with
    Adwords. Anywy I’m adding this RSSto my e-mail and ccan look out for much more of your respective intriguing content.
    Ensure that youu update this again very soon.

    Visit my weblog: water damage window carpet cleaning in san francisco ca

  9. sales effectiveness (reply)

    When you start to think in possibility terms, today’s fashion followers are most vulnerable and need to approach the immigration laws
    and regulation, spokesman Mikhail Carpenter said.
    Companies still have a sales thorough overview the
    goals. Requirements and SalaryThough a high school.

    Want to know how to dance. This means that the products of your finances!

    But ya’ll can’t be all it takes to manage this down the road and they only hear
    features. Nokia can continue to talk?

    Visit my web site: sales effectiveness

  10. punch hero tips and tricks android (reply)

    First off I would like to say excellent blog! I had
    a quick question inn which I’d like to ask
    if you don’t mind. I was interested to find out how you centrr yourself and clear your thoughts
    prior to writing. I have hadd a tough time clearing my thoughts in getting
    my thoughts out. I truly do enjoy writing
    but it just seems like the first 10 to 15 minutes tend to be lost
    simply just trying to figure out how to begin. Any
    recommendations or tips? Kudos!

  11. Robbin (reply)

    com is a China based online supermarket աith super lowest price.
    guest speaker – Cutest Cub іn America а Eugene Lee and tɦe main Event ” Crowning Ms. This is a different kind of Air Force 1, the Nike Air Force 1 Low also the Air Force 1 High.

    Stop by my blog post – cougar dating.org (Robbin)

  12. Leonore (reply)

    This organization trains and sends families to different areas.
    A word to the wise, sales reps that have too many lines may not have the time
    to pitch everyone’s lines. Nobody submissions Blake goodbye and therefore promotes the guy to beach.

    My web blog :: Missionaries Of charity (Leonore)

  13. garcinia camogia (reply)

    Hi, I do think this is an excellent web site.
    I stumbledupon it ;) I will return once again since i have saved as a favorite
    it. May and freedom is the greatest way to change, may you be
    rich and continue to help other people.

    Have a look at my website … garcinia camogia

  14. Mauricio (reply)

    I’m truly enjoying the design and layout of your website.

    It’s a very easy on the eyes which makes it much
    more enjoyable for me to come here and visit more often. Did you hire out a designer to
    create your theme? Superb work!

  15. Digital Flyer Printing (reply)

    Howdy just wanted to give you a brief heads up and let you know a few of the
    pictures aren’t loading correctly. I’m not sure why but I think its a linking issue.
    I’ve tried it in two different browsers and both show the same outcome.

  16. google (reply)

    Of course, it is critical that you know when you are capable and when to step aside to
    allow for a better chance of success in the end.
    Uncover out additional right now how to produce Pay-Per-Click ads that function, with
    his well-liked Totally free series of PPC Recommendations for advertisers.
    Abb – Vie is best known for marketing Humira, the top-selling treatment
    for rheumatoid arthritis.

  17. travel (reply)

    I really like your blog.. very nice colors & theme.

    Did you create this website yourself or did you hire someone to do it for you?
    Plz answer back as I’m looking to create my own blog and would
    like to know where u got this from. many thanks

  18. vacation (reply)

    Hello my family member! I wish to say that this post is amazing, great written and include approximately
    all important infos. I would like to look extra posts like this .

  19. outdoor-trip (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.

  20. pas cher chaussure nike pas cher pour enfant (reply)

    Excellent items from you, man. I have be mindful your stuff previous to
    and you are just extremely wonderful. I really like what you’ve bought here, really like
    what you are saying and the way through which you are saying it.
    You are making it entertaining and you still care for to keep it smart.
    I can not wait to learn far more from you.
    That is really a great website.

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>