tags:

views:

181

answers:

3

I can't get line-height on a text input to work on Firefox 3.5.8/(Mac). Works flawlessly on:

  • IE6
  • IE7
  • IE8
  • FF3.6/PC
  • FF3.6/Mac
  • Safari

Test code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>asd</title>
    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.0r4/build/reset/reset-min.css" />
</head>
<body>
<input type="text" value="Hello" style="line-height:50px;height:50px;font-size:16px;" />
<input type="text" value="Hello" style="padding:17px 0;font-size:16px;" />
</body>
</html>

Is there an alternate solution or any idea how to fix this?


Edit: Updated the test code, to compare line-height vs. padding technique. Padding works on all above browsers except IE8. Whaat?

I can't test on FF/3.5.8 anymore, could someone please report the result from this browser on any plattform?

I'm now thinking this is a Firefox 3.5.8 issue, plattform independent.

A: 

I am not aware this doesn't work on the Mac. Googling shows people talking of problems with it being too big/too small or not working as expected, and they even talk of using it in earlier versions, but no one has said it doesn't work at all. So I question your assumption that it doesn't work at all.

EDIT: I got FF and Safari switched around due to the Mac reference.

Rob
Sadly, my assumptions are based on actual results :-(
Znarkus
Seems Webkit sets input to 'inline-block' but Firefox sets line-height to 'normal' and '!important' so that's why it can't be changed.
Rob
Wait, if that's just the browser stylesheet, sure it can be changed, you just have to override it by getting specific on the selectors, right? Like #content input.dammit { line-height:200% !important; }
D_N
@DN User stylesheets override author stylesheets and this !important rule is in the browser.
Rob
+1  A: 

This sounds suspiciously similar to bug 349259. The reason back then was that Mozilla was intentionally enforcing a line-height: normal rule for text inputs via an !important directive, and the bug is still open. Verifying with the current source code for the Firefox trunk shows that this should still be in effect, so I don't really understand how it could work in Firefox 3.6...

Jonas
A: 

This is still affecting FF 3.6. Its a real pain in the you know what too.

The mean little piece of code lives on line 99 of forms.css for FF

line-height:normal !important;

I seem to be able to override it for 3.5.8, but for some reason 3.6 ignores my override with my own !important.

Bob Spryn
I take that back. I can't override it in either. Guess you can't override browser stylesheets. Bastards!
Bob Spryn
Doesn't http://www.w3.org/TR/CSS2/cascade.html#important-rules say it should be overrideable? I think it's weird, we as a community should do something :p
Znarkus