OK here is what I found out, when I assign height to all my form elements, they will not be aligned horizontally, when they actually should. Chrome rendered this OK, FF pushed the form button too far up. Is there an elegant solution to this?
<form>
<input class="input_text" type="text" style="height:40px" value="some text">
<select style="height:40px">
<option value="0">0</option>
<option value="1">1</option>
</select>
<input type="submit" value="Search" style="height:40px">
</form>
This is vertical align, not horizontal. Looks like this is bug in FF. As the work around add the "vertical-align:top" to the button
you can try to ditch input type button and use <button type="submit">Hello Button</button> then reset your form elements.
by using button tag you will have option to add nested elements. like <button><span>Funky Button!</span></button> for background image tricks and so on.
reset for form elements may look something like this:
/*remove ie side spacing(paddings)*/
button {position:relative; border:0; padding:0; cursor:pointer; overflow:visible;}
/*remove extra padding for firefox*/
button::-moz-focus-inner {border: none;}
button span {position:relative; display:block; white-space:nowrap;}
/*fix for webkit (safari-chrome)*/
@media screen and (-webkit-min-device-pixel-ratio:0) {button span {margin-top: -1px;}}
input {border:0; margin:0; padding:0;}
textarea {border:0; margin:0; padding:0;}
then you can add your borders styles backgrounds as you want and they should look identical in almost every modern browser
I've found this to be a bug in Firefox.
In the past I've fixed it with
1: a firefox specific hack.
2: not setting the height of the button ever. It remains vertically centered in all browsers.