Css javascript /moteur de recherche

Bonjour,

Hier sur ma page http://olivierbaudrydesign.free.fr/ j'ai décidé d'arranger l'espace rechercher qui était comme
http://olivierbaudrydesign.free.fr/?page_id=5/ auparavant
sur les deux j'ai ajouter une image de loupe en background image
sur http://olivierbaudrydesign.free.fr/ j'ai modifié quelque peu le css et cela me décale la fenêtre de recherche très bizarrement :

voila mon code #s {
width: 150px;
height: 17px;
background-image: url(/wp-content/themes/oupocreanum/images/loupe.gif);
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: dotted;
border-right-style: dotted;
border-bottom-style: dotted;
border-left-style: dotted;
border-top-color: grey;
border-right-color: grey;
border-bottom-color: grey;
border-left-color: grey;
vertical-align: text-bottom;


/* partie rajoutée pour le texte rechercher mais comment l'afficher à droite de la loupe il y a pourtant 18 pixels figure sur http://olivierbaudrydesign.free.fr mais pas sur http://olivierbaudrydesign.free.fr/?page_id=5 */


margin-top: 0pt;
margin-right: 0pt;
margin-bottom: 0pt;
margin-left: 18px;
color: #b4b4b4;
font-family: Verdana,Arial,Helvetica,sans-serif;
font-weight: bold;
font-size: 1em;
font-size: 9px;
letter-spacing: 0px;
background-color: #ffffff;
float: left;
padding-right: 0pt;
padding-bottom: 1px;
padding-left: 0pt;
}


Avec ce style CSS j'ai le caractère voulu au texte sa graisse mais seulement le texte devrait apparaître à 18 pixels à droite pour ne pas masquer l'image de la loupe.

Pour plus de détaille voilà sur http://olivierbaudrydesign.free.fr/

le code de ma balise de recherche avec le javascript

<div id="search">
<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="get" name="searchform" id="searchform" onsubmit="if(document.searchform.keyword.value=='Rechercher'){alert('Entrez votre recherche');document.searchform.keyword.focus();return false;}">
<input type="text" name="s" id="s" value="Rechercher" size="12" maxlength="255" onClick="this.value='';" class="champ_recherche" onfocus="if(this.value=='Rechercher'){ this.value=''; }" onblur="if(this.value==''){ this.value='Rechercher'; }"/>
<input type="image" alt="submit" src="/wp-content/themes/oupocreanum/images/return.gif" action="javascript:document.searchform.submit()"/>

</form>
</div>


et sur http://olivierbaudrydesign.free.fr/?page_id=5

voilà mon code :

<div id="search">
<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="get" name="searchform" id="searchform">
<input type="text" name="s" id="s" value="search in blog..." />
<input type="image" alt="submit" src="/wp-content/themes/oupocreanum/images/return.gif" />
</form>
</div>