Chrome - inputs align in a div (works on FF & IE)

On the main page of my website I have a problem concerning the two inputs located at the top right of the page ("Rechercher" text field and "OK" button).

In fact, my CSS works on FF &am开发者_JAVA技巧p; IE but not on Chrome.

To make it more generic, it's just two input in a div.

Can you help me to correct this misbehaviour on Chrome?

Thanks a lot guys!

CSS of the "Rechercher" text field:

 #champ_recherche_style {
height:14px;
margin-bottom:15px;
margin-top:15px;
width:150px;
}

CSS of the "OK" button:

 #habillage_bouton_texte_recherche_style {
background-color:#8C8C8C;
color:#FFFFFF;
display:inline;
font-family:Verdana;
font-size:11px;
font-weight:bold;
margin:15px 1px 0 10px;
padding:0 3px;
text-decoration:none;
vertical-align:top;
}

CSS of the div:

 #encart_recherche_style {
padding-left:746px;
text-align:center;
width:210px;
}

In general, tables are terrible for layout, but if you MUST use them, just put your button in a TD after the input's TD instead of putting the input field in a table by itself and attempting to force the table to display inline.

I highly suggest learning how to use CSS for your layouts in the future.

Again, I don't recommend tables for layout, but...

Instead of:

<table>
    <tr>
        <td> INPUT IS HERE </td>
    </tr>
</table>
BUTTON IS HERE

Try this:

<table>
    <tr>
        <td> INPUT GOES HERE </td>
        <td> BUTTON GOES HERE </td>
    </tr>
</table>

Using inline-block instead of inline on your table will get you closer to the behavior you want.