32

I have realized the problem before but I guess it didn't matter as much then as it did now.

What I discovered is that Firefox has a default line-height value of 1.2 for input fields which can not be changed. At least in OSX, don't have Windows so I can't confirm it there.

I did some experimenting and testing and there's just no way to change the default line-height value of Firefox. All the other browsers (ok, I just tried with Chrome and Safari) obey my value perfectly fine but not Firefox.

Has anyone ever noticed this and if yes, have you found a solution to overcome this?

gustavohenke
  • 40,997
  • 14
  • 121
  • 129
Ragnar
  • 520
  • 1
  • 10
  • 16
  • Oh, I need to mention that I only confirmed it with 16px font size. It most probably varies with different font sizes. Probably. – Ragnar Sep 06 '10 at 09:57
  • 3
    Ok, found an answer: http://www.cssnewbie.com/input-button-line-height-bug/ – Ragnar Sep 06 '10 at 10:15
  • 1
    this is also related http://stackoverflow.com/questions/7229568/input-height-differences-in-firefox-and-chrome – Jitendra Vyas Oct 09 '11 at 11:33
  • "It most probably varies with different font sizes." It also varies across browsers AND typefaces unfortunately. http://meyerweb.com/eric/thoughts/2008/05/06/line-height-abnormal/ – Ian Storm Taylor Jan 24 '12 at 03:43
  • 1
    Anyone running into this problem should voice their support of these two bug reports https://bugzilla.mozilla.org/show_bug.cgi?id=349259 https://bugzilla.mozilla.org/show_bug.cgi?id=697451 – Ian Storm Taylor Jan 24 '12 at 03:45

7 Answers7

24

Unfortunatelly the line-height is set to !important in the Firefox base css ... http://hg.mozilla.org/mozilla-central/rev/b97aef275b5e

Yacine Zalouani
  • 7,999
  • 6
  • 25
  • 24
5

I always style my buttons against anchors, buttons, labels, and submits to ensure that regardless of which element used, the outcome looks exactly the same.

Since Firefox insists on using !important to declare line-height, the only way I can calmly overcome this issue is to force all other vendors to use line-height: normal for buttons, and then use padding to vertically center the text:


/**
 * Consistently style buttons on anchors, buttons, labels, and submits
 */
.btn {
    .
    .
    .
    height: auto;        // ensure heights on inputs do not affect submit buttons
    line-height: normal; // all browsers use FF's ever unchanging value
    padding: .5em 1em;   // vertically center the text in the button
    .
    .
    .
}

This works similarly for inputs.

Larry
  • 1,238
  • 2
  • 20
  • 25
4

As far as I know from experience the line-height on input won't change unless you change the font-size - than the line-height will change to be the same as font-size + 4px (2 top 2 bot i guess).

In case this bothers you with styling, you can use the top and bottom padding to achieve a fake bigger line-height effect.

easwee
  • 15,757
  • 24
  • 60
  • 83
  • See, that's the thing - when you don't specify the line-height and just play with padding, it will look completely different on other browsers. At least in webkit browsers on OSX. – Ragnar Sep 06 '10 at 12:02
  • Yup, it can mess around alot. I wouldn't suggest styling input fields at all and leave the default behaviour (also you can hardly confuse the user leaving it on default) and also not worth wasting precious time if the money benefit won't be much from adding this feature. – easwee Sep 06 '10 at 12:33
  • Another approach you can take is to remove all the styling from the input and make it transparent and than style it's looks with a wrapping div and backroundg image- I often use this technique on graphic intensive designs and users will hardly notice the line-height at all. – easwee Sep 06 '10 at 12:35
3

If your input and submit button are side by side, with the button down about 1px lower then the input (looks like your background image is off), a simple:

display:inline-block;
vertical-align: top;

on the button lines it up perfectly in FF & IE.

Robert Koritnik
  • 103,639
  • 52
  • 277
  • 404
Dawn
  • 31
  • 1
1

Line-height cannot be applied to replaced inline elements such as buttons and inputs. This is the correct behavior relative to the Spec.

See https://developer.mozilla.org/en/docs/Web/CSS/line-height for more details.

etoxin
  • 4,908
  • 3
  • 38
  • 50
0

Just give the wrapping form element the desired line height and at least all input fields of type="text" in Firefox will take that same line height. Submit buttons seem to behave differently though...

RavanH
  • 791
  • 5
  • 5
0

Use Height instead of Line-Height. This works for me in almost all browser on Windows7, but I have not tested it on OSX.

Nicholas Pappas
  • 10,439
  • 12
  • 54
  • 87
TechYogi
  • 371
  • 3
  • 12
  • vertical-align: middle; isn't applied in Chrome 30 (OS X) when using this technique. – Larry Oct 23 '13 at 10:46
  • Best way to avoid it use 'padding', it'll work on all browsers including IE 7-8-9, FF, Chrome, Safari on Windows 7-8 – TechYogi Mar 10 '14 at 10:24