The Firefox Input Button Line-Height Bug

Published February 25, 2010 by CSS Newbies.

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.

239 Responses

  1. shower filters (reply)

    Just wish to say your article is as astounding. The
    clearness in your post is just spectacular and i could assume you are an expert on this subject.
    Fine with your permission allow me to grab your
    feed to keep updated with forthcoming post. Thanks a million and
    please continue the enjoyable work.

  2. interchangeable bride and groom cake toppers (reply)

    If your dress is simple, take the opportunity
    to make your look really pop with something more bold and
    colorful. This only works if one of the Sims has the Great Kisser Sims 3 trait.
    They are very popular that are inspired by fairy tales.

  3. stretch marks cream pregnancy (reply)

    I am fascinated by this useful article. There are actually numerous things pointed out here I had never
    believed of before. You have made me comprehend there’s more than one way to think about these things.

  4. Fitness watches 2014 (reply)

    Carli Kiene can also buy Instagram followers buy to get more followers very cheap.
    A very good thing about fake followers. In addition, this
    eight-month-old company has yet to release new solo music.
    But aside from the original Instagram and 935, 109 mentions of Instagram unapologetically expressed their dislike for the person with the user’s profile photo to life without being overly intrusive to viewers.
    Björ Blixter, a rising star out of the trailer for the download statistics in Google Play, Google’s
    new online store for digital media.

  5. Rosella (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.

  6. rakuten (reply)

    Awesome issues here. I’m very happy to see your post. Thanks so much and I’m having
    a look ahead to contact you. Will you kindly drop me a mail?

  7. Madelene Z. Ducasse (reply)

    Have you ever thought about adding a little bit more than just your articles?
    I mean, what you say is important and everything.
    However imagine if you added some great photos or video clips
    to give your posts more, “pop”! Your content is excellent but with images and videos,
    this blog could certainly be one of the very best in its niche.
    Fantastic blog!

  8. pulse drum set (reply)

    Thanks for one’s marvelous posting! I definitely enjoyed reading it, you could be a great author.
    I will make sure to bookmark youir blog and will often come back down thee road.

    I want to encourage you continue your great job, have a nice holiday weekend!

  9. Clash of Clans no survey (reply)

    The map has 3 different lanes, which lead from
    your own to the enemy base. If the ball falls in any of these slots, the player wins 8 times
    his amount. Monks invented the game hands – Jeu de Paume
    prior to tennis.

  10. taotronics 120w led review (reply)

    They cost less to run than incandescent grow lamps do as well.
    The recently developed LED grow lights aim to replace them because of
    these main reasons:. This is done by the LED lamp imitating the light from the sun and by emitting the same
    types of light onto the plant.

  11. Iphone (reply)

    While no clear solution is available yet,
    if you’ve noticed that the battery on your i – Phone or i – Pad is draining faster, here
    are four suggestions:. For the purpose of this document, we’ll create a local user database on the router.
    For example, many people are familiar wiuth the situation where when there are
    suspicions that your spouse or partner is having an affair
    with someone else, and worst still, such suspicions grow from day to day and make life miserable for
    you, and you want to finally learn the truth.

  12. (reply)

    I think that everything posted made a lot oof sense.
    But, whhat about this? suppose you were to write a awesome headline?
    I am not suggesting your content isn’t solid., however whawt iff you added a title that makes people desire more?

    I mean Thee Firefox Input Button Line-Height Bug is a little vanilla.You might glance at Yahoo’s home page and
    watch how hey create news titles to grab people interested.
    You might try adding a video or a picture or two to grab readers interested about everything’ve got to say.
    In my opinion, it would bring your website a little bit more interesting.

  13. valentino shop boston (reply)

    Hello admin, I just wanted to give you a brief heads up that your URL: %BLOGURL% is being flagged as a potentially malicious internet site in my web browser firefox. I would highly suggest having someone look into it. You can lose a lot of readers due to this issue. Very best of Luck.

  14. Rudolph (reply)

    I’m really enjoying the theme/design of your web site.
    Do you ever run into any browser compatibility issues? A couple of my blog audience have complained about
    my blog not working correctly in Explorer but looks great in Chrome.
    Do you have any ideas to help fix this issue?

  15. astral projection guide (reply)

    Thanks for any other great article. The place else may anyone get that kind oof informarion in such an ideal method off writing?

    I haqve a presentation subsequent week,and I’mon the search for such information.

  16. Consuelo (reply)

    Fantastic beat ! I would like to apprentice while you amend your website, how can i
    subscribe for a blog site? The account aided me a acceptable deal.
    I had been a little bit acquainted of this your broadcast
    provided bright clear concept

  17. katalog tas (reply)

    I’m really getting the design and layout of your blog.
    It’s a very easy on the eyes which makes it much more pleasant for me to come here and visit more often. Did you hire out a designer to create your theme?
    Fantastic work!

  18. dùng đá phong thủy (reply)

    In July, people celebrate the 4th of July (in the U.
    Feng shui wedding tips can help newlyweds attract more love into their relationship.
    A bath is a great way to start off your morning or end your day,
    especially if you had a stressful day or a particularly physical one.

  19. David (reply)

    Ran into a similar issue with an input[type=radio] ignoring “height.”
    I was able to resolve it by simply using “-moz-appearance: none” which tells Firefox to not use its default stylings. Maybe that would work here for you too?

  20. Profesionalios SEO paslaugos (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.

  21. Verslo idėjos (reply)

    I am fascinated by this useful article. There are actually numerous things pointed out here I had never
    believed of before. You have made me comprehend there’s more than one way to think about these things.

Leave a Reply

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