Firefox Button And Text Input Bug

I have this really weird problem, button and input have a same CSS (except background), but Firefox renders those differently. There are no problems in IE or Chrome. #searchInput {

Solution 1:

Based on your last comment...

Margin doesn't cause my problems, problem is that input is much wider and higher

You have to add box-sizing:border-box property to your input#searchInput

Like:

#searchInput {
    ....
    box-sizing: border-box;
    -moz-box-sizing: border-box; /* Firefox */
}

Working Example: http://jsfiddle.net/XLyBR/1/

Solution 2:

Your margin differs in the searchInput and searchButton css classes

Also what about the default css line-height on these elements - do they differ - try specifying line-height.

Wing

BTW - it would help if you tell us how the rendering differs