Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Firefox line-height issue with input fields

Tags:

css

firefox

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?

like image 635
Ragnar Avatar asked Sep 06 '10 09:09

Ragnar


People also ask

What is default line height CSS?

Desktop browsers (including Firefox) use a default value of roughly 1.2 , depending on the element's font-family . The used value is this unitless <number> multiplied by the element's own font size.

How line height is calculated?

Sets line height to be equal to a multiple of the font size. If your font size is 10px, your line height will be 10px, 18px, and 20px, respectively. Sets line height as a percentage of the font size of the element. If your font size is 10px, your line height will be 3px, 5px, and 11px respectively.

How do I change the height of a line in HTML?

It turns out that's pretty simple: just use the line-height CSS property and then apply it. I have an example below. Then, you can apply that CSS class to your HTML. Now, the space between the lines changes.

What is line height in typography?

Line height, also known as leading, controls the amount of space between baselines in a block of text. A text's line height is proportional to its type size.


2 Answers

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

like image 182
Yacine Zalouani Avatar answered Sep 17 '22 21:09

Yacine Zalouani


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.

like image 33
Larry Avatar answered Sep 18 '22 21:09

Larry