CSS Firefox Vs Chrome Inconsistent height and position output

Question

I am stucked with a problem of css inconsistency between my browsers (Chrome and Firefox) in http://204.197.252.143/~themainr .

The height of the search button is not identical when compared.

Plus the searchbox is not well aligned in firefox as shown in the images below:

This is the view in google chrome (this is the desired output in all browsers):

This one is in the firefox:

I tried adjust the float to right of the search section but its just messes up the look of the it.

Is there any a good technique to display this correctly?

Answer 1

lol, all the tools in the world doesn't replace just playing with it sometimes.

I was able to get the desired results by changing the font-size of the search text box from 25px to 24px. In both firefox and chrome it seemed to look good to me.

I was able to do this by using firebug for firefox and the built in developer tools for chrome.

Learn to use them because they are very important for tweaks like this.

Good luck

EDIT more detailed example of what I changed

li.search input[type="text"] {
    border: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    background: #ebebeb;
    margin-left: 20px;
    position: relative;
    top: -1px;
    width: 205px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    font-family: 'waukegan';
    font-size: 24px; /*originally font-size: 25px;*/
    padding-top: 2px;
    padding-bottom: 3px;
    padding-left: 8px;
}