Question

I am having a very strange problem here. I tried to create a search bar and this is how it looks in chrome, which is what i want.

It works fine in Safari, Here is all the involved CSS code.

#input {
    height: 25px;
    padding-left: 5px;
    width: 70px;
}
#button {
    margin-left: -6px;
    height:27px;
    position: relative;
    top: -2px;
    padding-left: 5px;
}

But in case of FireFox, the Button moves up a little which makes it look bad. Here is how it looks in FireFox.

This BUg in Firefox is fixed if i remove the line top: -2px; but then a similar problem crops up in Chrome and Safari.

How do i Fix this ?

Answer 1

You can fix with jQuery

Code

$(document).ready(function(){
    if($.browser.mozilla){
        $("#button").css("top", "-2px")
    }
})

If you have not added jQuery add this script

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>