CSS: Submit button looks smaller than text input and textarea

Question

I just noticed this strange rendering of a very simple form.

Here\'s my markup/CSS: http://jsfiddle.net/a9PLM/

As you can see, text fields and the button sha

Answer 1

I've used this CSS-only solution which works in IE, FF and Chrome. Basically, the idea is to manually force the height of input elements to values larger than standard boxes. Do this for both text and button:

• Set margins and padding to 0.
• Set vertical-align to middle.
• Use height/width to control text and button dimensions. Text height must be several pixels greater than font height (in order to override standard box dimensions). Height of button must be 2 pixels greater than text.

Example:

input { margin:0; padding:0; border:solid 1px #888; vertical-align:middle; height:30px; }
input[type="submit"] { height:32px; }