Need an override in Firefox & Chrome for line-height: normal !important

Question

So i have been spending the better part of this past week stuck on the fact that chrome likes to "minimum-lock" the line-height to match the font on forms. More specifically text, password, and email inputs. Of which I was trying really hard to override.

What I mean by "minimum locking" is that for my font to work on the theme I have made, it has to be 40px. So line-height, for it to look good, is to be set to 28px. But, its being overridden to 41px, i think. Now, I can adjust the line-height above 41px and it will effect the style, but, no less.

I know it works due to the fact that the rest of the site is doing it just fine. I tried a huge array of solutions that apparently work for others found all over Google's searched answers. So after the stress finally conquered me, i decided to just give up and let the extra space go.

*days later*

After finally getting it to look somewhat relevant to the theme I decided to start debugging firefox.

*flips desk ... cries over broken tech ... T.T ... buysNewComputerOpensBoxSetup! ... flips desk again*

Not again! Only this time the submit button is doing the same thing. Except that its "locking" the line height on the button to the font. This completely screws up the flow, and looks odd. For some of you that might not be a big deal, but, consider me OCD because it needs to work or I scrap it and try all over.

---

I present to you, the example. Please proceed to the website below, using either firefox or chrome and direct your attention to the login form in the top right. The text and password fields in chrome. And the submit button in firefox.

If your still lost, feel free to edit the Login form css using the inspectors and try doing as i described.

(Edit: Link Removed - Website has changed sense then.)

This image is exactly what I'm looking for. (Keep in mind this was rendered in paint, not in a browser)

---

This image is is what Chrome does to that. This is very much acceptable tho.

---

This image is what Firefox does to that. Firefox happens to be doing both problems here. The button is not acceptable.

---

Hopefully some well knowledge individuals can shed some light on this issue. ... If not, at least I know where my towel is.

---

Edit: Keep in mind its in a factor of 4 all over the theme. So some of the stylings had to be set to odd numbers to fix this. You'll see what i mean when you look at it.

Also, I would like to have a pure CSS/HTML solution. But, will settle for javaScript if none exist.

Answer 1

I've found this: http://www.cssnewbie.com/input-button-line-height-bug/#.UwdzJfl_soI

From the article:

Basically, Firefox is setting the line-height to “normal” on buttons and is enforcing this decision with an !important declaration.

And while trying to work around this rule, I discovered something that makes the situation a little more dire: browser-defined !important rules cannot be over-ruled by author-defined !important rules. This rule cannot be overruled by a CSS file, an inline style — anything.

Which is definitely related to the problem I'm seeing in Firefox.

The only thing I can think of is creating a div instead to hold the "Login" text and then have a hidden submit button which is triggered on the click event of the button.

That way you get to keep your form all tidy and get the ability to tweak the div till you're happy with it.

EDIT: Here is the jsFiddle with the example: http://jsfiddle.net/F74rf/