Problem with line height with firefox

Question

I have a problem trying to make the search button look great on firefox. This is an input file made with an iconic font on a white background and border radius as follows:

display: block; width: 60px; height: 60px; line-height: 60px !important; padding: 0; background: white; border: 0; border-radius: 30px; -moz-border-radius: 30px; -webkit-border-radius: 30px; -khtml-border-radius: 30px; font-family: 'iconic'; color: #bad104; font-size: 5em; 

It should look like this (chrome and IE render my code perfectly): http://img341.imageshack.us/img341/6590/kogy.png

But when I use the same code in firefox, here is what I get: http://img17.imageshack.us/img17/953/jms4.jpg

I looked at the dom inspector in both browsers, and when I look at the “calculated values”, it does not do the same for chrome (line-height: 60px) and firefox (line-height: 67px).

All I tried now is failure: / I hope you guys will help me :)

Thanks!

Answer 1

The line height of a line in FF is hard-coded as line-height: normal !important; , which means that even the custom line-height: xxx !important will not override it.

Give them the following:

https://bugzilla.mozilla.org/show_bug.cgi?id=349259

https://bugzilla.mozilla.org/show_bug.cgi?id=697451

Answer 2

You do not have to determine the unit of measure with the height of the line, this means that the distance is relative to the font size. In your example

line-height: 60px;

it should be

line-height: 1;

or

line height: 100%;

as you indicate that you want it to be the same height as the font.