input box and button aren't matching up IE and Firefox - html

Question

I have a search box on-top of the page I am making, I have been trying to make the page cross-browser friendly as well as have a flexible page resolution.
I have come across this problem
http://imgur.com/gS3q02W
The button and the input box don't line up horizontally. No matter what I change it to one is always different than the other on the other browser.
Does anyone know of a cross-browser friendly solution?
html
<div id='search'>
<form>
<input class='search' type="text" placeholder="what would you like to find?" required>
<input class='button' type="button" value="search">
</form>
</div>
css
#search {
padding-left:200px;
margin-right:5px;
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
}
.search {
margin-top:5px;
padding:4px 15px;
width:250px;
background:#FFF;
border:none;
color:#232d38;
}
.button {
position:relative;
padding:4px 15px;
left:-4px;
border:none;
background-color:#FFF;
color:#232d38;
}
.button:hover {
border:none;
background-color:#FFF;
color:#000;
}

Answer 1

I have found the solution.
The problem is down to the browser’s default styles. Mozilla, in their infinite wisdom, have chosen to put this line in their CSS:
button, input[type="reset"], input[type="button"], input[type="submit"] {
line-height:normal !important;
}
In Firefox, buttons get an extra 2px padding. In all other browsers they don't. So it is impossible to make them match using just padding.
You have to set top and bottom padding to 0px, and use height: 25px; vertical-align: middle; to make up for the loss of padding.

Answer 2

I was having this same issue, and used John's answer above to come up with a solution without having to use the height and vertical-align properties.
In my reset styling I basically made it so that all inputs had normal line height so that Chrome would render the same as Firefox and IE. The important addition between this and John's code above as targeting the general input selector:
button, input[type="reset"], input[type="button"], input[type="submit"], input
{
line-height:normal !important;
}