Blog: Bulletproof CSS input button heights

You’ve built and styled an HTML form with a button or input tag for submitting it and everything looks amazing in Safari and Chrome. Then you check it in Firefox and find that your buttons are all the wrong height.

The problem

You’ve styled your button up using line-height and it’s looking beautiful in Webkit-based browsers. Your CSS probably looks something like this:

button, input.submit {
border: 2px solid #333; background: #666;
font-size: 14px; font-weight: bold; color: #ccc;
padding: 0 20px; line-height: 36px;
}

In Firefox, however, things are not so rosy. The problem is down to the browser’s default styles. Mozilla, in their infinite wisdom, have chosen to put this line in their CSS:

button, input[type="reset"], input[type="button"], input[type="submit"] {
line-height:normal !important;
}

The “!important” in the browser’s own stylesheet means that, try as you might, this style can’t be overridden. Eric Meyer posted an excellent article about this on his blog: line-height: abnormal

Existing Workarounds

A quick search of the web reveals that this problem is well-known and that there are several workarounds available. Here’s a typical one (found at CSSNewbie):

button, input {
border: 2px solid #333; background: #666;
font-size: 14px; font-weight: bold; color: #ccc;
padding: 11px 20px;
}

The line-height declaration is gone, replaced instead with top and bottom padding. You’ll see now that everything is still okay in good old Webkit, but Firefox is rendering it slightly taller. While this solution is good, it still isn’t perfect; it looks better in Firefox, but there are still inconsistencies especially when viewed in Safari on iOS4 devices like iPad and iPhone.

CBJ's solution

I tried setting a height on the button and used “vertical-align” to position the text like so:

button, input {
border: 2px solid #333; background: #666;
font-size: 14px; font-weight: bold; color: #ccc;
padding: 0 20px; height: 40px; vertical-align: middle;
}

Let’s take a closer look at what I did there:

  • Disabled top and bottom padding
  • Set the height of the button to be 40px tall
  • Set vertical-align to middle;

Because we are no longer using line-height, we get the correct result across all of our test browsers. Note that IE6 doesn’t get it quite right but, if you are still supporting it (at CBJ Digital we use a universal stylesheet) you can serve up some corrective rules via a conditional stylesheet.

I hope you find this helpful. I spent several hours searching for “the perfect CSS input button” and I hope this article helps you too.

Test page

Screenshots, and all test code is available on the test page.

Posted on: Wednesday, 4th August 2010
Return to: latest news or archive for August 2010

blog comments powered by Disqus

Contact us for a quote

For a no obligation quote on your next web design/development project, please contact us now.

Technical support

Technical assistance can be made available on an ad hoc basis. Please contact us now for more details.

Twitter