Firefox line-height issue with input fields

views:

answers:

+2 Q:

Firefox line-height issue with input fields

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?

+1 A:

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 2010-09-06 10:25:16

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 2010-09-06 12:02:24

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 2010-09-06 12:33:37

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 2010-09-06 12:35:17

ansaurus

tags:

views:

answers:

Firefox line-height issue with input fields

related questions