Mozilla/ Firefox CSS issues compared to webkit

I have designed a search box.

In Chrome/ Safari and IE, it displays as I want.

However, in Firefox, the search button isn't inline.

The code is

.form-search .button {
left: 356px;
position: absolute;
top: 4px;

Is there a way to add a -moz- line of code to set the left and top just for firefox?

EDIT - MORE CODE AND IMAGES

.form-sea开发者_如何学Crch {
    background: url("../images/searchbox.png") no-repeat scroll 0 0 transparent;
    float: left;
    height: 40px;
    margin: 20px 0 0 20px;
    position: relative;
    text-align: center;
    width: 400px;
    border: 0;
}
.form-search .button {
    position: absolute;
    left: 356px;
    top: 4px;
}
.form-search .input-text {
    color: #847D7D;
    font-size: 1em;
    font-weight: bold;
    left: 110px;
    position: absolute;
    top: 8px;
    width: 230px;
    border: 0;
}

That is the entire CSS for the search facility.

Firefox display

IE display

Thanks

You are having this problem because your elements are lacking display: inline-block; and you maybe should use relative positioning for this.