![\"\"](\"https:\/\/cssdeck.com\/blog\/wp-content\/uploads\/2010\/02\/button-sizes-by-browser.png\" "\\"Button")
<\/p>\n<\/p>\n
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!<\/p>\n
For example, take the following code:<\/p>\n
input#button {\n\tborder: 2px solid #06f;\n\tcolor: #06f;\n\tbackground-color: #6cf;\n\tfont: bold 12px Arial, Helvetica, sans-serif;\n\tline-height: 50px;\n}<\/pre>\nIn 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. <\/p>\n
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). <\/p>\n
The Problem, Defined<\/h3>\n
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.<\/p>\n
![\"\"](\"https:\/\/cssdeck.com\/blog\/wp-content\/uploads\/2010\/02\/firebug-firefox-line-height.png\" "\\"Firebug")
<\/p>\n
So what gives?<\/p>\n
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:<\/p>\n
button, input[type=\"reset\"], input[type=\"button\"], input[type=\"submit\"] {\n\tline-height:normal !important;\n}<\/pre>\nBasically, 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.<\/a> <\/p>\nAnd 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.<\/p>\n
So what’s to be done?<\/p>\n
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.<\/strong><\/p>\nSo to take the example from earlier, we’d convert it to look like this instead:<\/p>\n
input#button {\n\tborder: 2px solid #06f;\n\tcolor: #06f;\n\tbackground-color: #6cf;\n\tfont: bold 12px Arial, Helvetica, sans-serif;\n\tpadding: 18px 6px;\n}<\/pre>\nThis 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.<\/p>\n