Why does Firefox have a 3px wide border on input[type=submit]?

Question

All my submit buttons have different size and it looks really weird. At least I want them to have the same height. Look at the pictures below.

Firefox:

IE7:

Chrome & IE8 (how i want it):

My CSS looks like this:

input, select, textarea {
 margin-bottom:3px;
}
input, select, button, textarea {
 font-family: Tahoma, Verdana, sans-serif, FreeSans;
 font-size:11px;
}
input[type=submit] {
 padding:1px 3px;
}

Anyone know how i can fix this?

UPDATE

Width problem fixed. Problem now: The height of the button in Firefox. Any tips?

Answer 1

You can get rid of the ridiculous left- and right-side padding in IE by adding:

width: auto; overflow: visible;

to the CSS for buttons, and for "submit" and "button" inputs. (Why? who knows?)

As to the height, you might experiment with setting "line-height". Be warned that "line-height" can make IE do bizarre things to buttons however.