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.

134 Responses

  1. web hosting theme for wordpress (reply)

    Harley-Davidson motorcycle demo rides will be available at Daytona International Speedway February 27
    to March 6. Some offer the option to allow your domain onto their site,
    which you will have to own. Mostly you can qualify
    for a discount from 10% to 20% for ordering the package for 1 or
    2 years.

  2. elmaz.com (reply)

    Hello everybody, here every one is sharing thse kinds of
    knowledge, so it’s nice to read this web site, and I used to pay a visit this
    webpage all the time.

  3. snore no more mouthpiece (reply)

    Thanks for a marvelous posting! I seriously enjoyed reading it, you could be a great author.
    I will be sure to bookmark your blog and will eventually come back from now on. I
    want to encourage that you continue your great job, have a nice
    evening!

  4. Penney (reply)

    Everything is very open with a clear description of the challenges.

    It was truly informative. Your website is extremely
    helpful. Thank you for sharing!

  5. social media statistics (reply)

    Great goods from you, man. I’ve understand your stuff previous
    to and you’re just extremely magnificent. I really like what you’ve acquired here,
    really like what you are stating and the way in which you say it.
    You make it enjoyable and you still take care of to
    keep it sensible. I can not wait to read much more from you.
    This is actually a wonderful website.

  6. t-mobile in palatine (reply)

    I do consider all of the concepts you’ve offered in your
    post. They’re very convincing and will certainly work.
    Still, the posts are very quick for newbies.

    May just you please lengthen them a bit from next time?
    Thank you for the post.

  7. axl hazarika (reply)

    I was extremely impressed overall with these guys, and extremely astonished that they are still unsigned.
    Metal has consisently been able to evolve and morph into another sub-genre that progressed their music in a
    new way. Now that the company knows it can sell innovation,
    it’s time to compete on a graphical level.

  8. napatyku.pl (reply)

    For August: 2nd, 10th, 11th, 24th, 25th, and the 26th.
    Obviously, it is not possible for people to assemble at one
    place on the particular place by all means.

    One of the biggest misconceptions about a workout plan based on a 7 day cycle is that it requires you to work out every day.

  9. ljubezenski verzi najlepši (reply)

    This design is steller! You certainly know how to keep a reader amused.
    Between your wit and your videos, I was almost moved to start my own blog (well, almost…HaHa!) Fantastic job.
    I really enjoyed what you had to say, and more
    than that, how you presented it. Too cool!

  10. Ricky (reply)

    Hey There. I discovered your weblog the use of msn. This
    is a really well written article. I will be sure to bookmark it and come back to learn extra of
    your helpful information. Thank you for the post. I will definitely return.

  11. kinky dating (reply)

    likewise, you can seek your preferred partner or can also get contacted by other like-minded members who liked your profile.
    Our Volunteers implement them here for our
    animal’s enjoyment. Some experts claim that women receive more emotional
    support than men post-divorce.

  12. game for android (reply)

    Sony’s Playstation 3 Each PS3 system comes equipped with
    a hard drive that, as stated previously, plays blu-ray discs in addition to a wide
    variety of video games. It may be the platform, each mobile application
    is different for different platform. Educators
    building and shaping young minds by personal computer technological know-how, aren’t they.

  13. Gabrielle (reply)

    Tɦanks for tthe auspicious writeup. It if truth be tߋld
    waas once a amusement account it. Look comρlicated to far aԁded agreeable from you!Hoԝever,
    how can we be inn contact?

  14. dodgeballfever.com (reply)

    They can be a bit pricey but if your car is pricey itself then you should be looking after it.
    You can connect your i – Phone, android phone, tablet or a gaming console and enjoy internet browsing at very
    impressive speeds. As an added effect, this vibrating
    - In addition, this – Furthermore, this – Additionally, this fitness
    equipment develop one mass, rouses blood circulation and helps in the reparation of body tissue.

  15. Pingback: line height emCamfrog | Camfrog

  16. Laurinda (reply)

    No matter how much you have in common, you still have your own thoughts and ideas
    and while you or your date may not always agree on some things it’s best not
    to bee too biased or judgmental over other people’s opinions.
    A more powerful immune system is incredibly essential to fix a yeast infection. In addition to all those,
    it helps the circulatory health, blood vessel health and
    has ingredients that have shown to be a nutritional support for mental alertness and
    enhances vitality level.

  17. sexy costumes for 2010 (reply)

    I know tis if off topic but I’m looking into starting my own weblog annd was wondering what alll iss needed too get setup?

    I’m aassuming hsving a blog llike yours would cost a pretty penny?
    I’m not very internnet savvy so I’m not 100% positive.

    Any tips or advice would be greatly appreciated.

    Appreciate it

    my web blog; sexy costumes for 2010

  18. Ray (reply)

    Today, I went to the beachfront with my kids.
    I found a sea shell and gave it to my 4 year old daughter
    and said “You can hear the ocean if you put this to your ear.” She placed the shell to her ear and screamed.
    There was a hermit crab inside and it pinched her ear.
    She never wants to go back! LoL I know this is totally off topic but I had to tell someone!

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>