How do I correct the line-height inconsistency on input elements between webkit browsers and Firefox?

Question

Is there a line-height discrepancy in Firefox that would be affecting the line-height on this input element? http://cure.org/curekids/

You'll see in the signup form right in the middle of the page that my email a dress input field has the text vertically aligned very awkward, whereas in Chrome, Safari and IE (gasp) all is well.

What's causing this inconsistency in Firefox and how should I remedy it?

Answer 1

All browsers have a default style for many elements, and they are not at all consistent, so the best approach to it is using a CSS Reset styleshit to remove all those default CSS rules.

The only "disadvantage" is that after including a reset you may have to add a couple more of rules, as you might have used some of the browser's defaults styles, like heading sizes for example.

I have been using the YUI 3 CSS Reset and it works really great, but be sure of including it before your CSS.

Answer 2

on sponsor.css you have div#sponsor-notify-me input#email-field there this padding:10px 10px 0; just change this to padding:0 10px 0; and also change the height:32px; to height:42px;