Formulaire sur une ligne...

Hey hey, bonjour à tous,

J'ai un problème de mise en forme sur un formulaire tenant sur une seule ligne (un champ input et un bouton submit) dont voici le code :

<div id="recherche" style="margin:0px;font-weight:bold">
<form method="post" action="annonce.php" style="margin:0px;padding:0px">Recherche&nbsp;<input type="text" name="recherche-annonce" maxlength="200" style="width:300px" />&nbsp;<input type="submit" style="height:20px" value="Lancer la recherche" /></form>
</div>

En parallèle de simples lignes CSS :

input,textarea,select{border:1px solid #b4b4b4;font-size:11px;font-family:tahoma;color:#717171}
input[type=text], input[type=password],select{height:20px;}

Le problème ?
Bien qu'ayant indiqué un padding et margin de 0px sur le formulaire, et bien qu'ayant défini l'input text et le bouton submit de même taille à 20px, il subsiste toujours un décalage (voir image) !
Indications supplémentaires : le bouton et l'input s'alignent bien sur le haut seulement à partir du moment où le bouton n'est défini qu'à 15px de hauteur, mais évidemment en parallèle il ne descend pas aussi bas que souhaité et l'input le bouton ne sont donc plus alignés en bas.

Ca doit être tout couillon mais c'est un vrai casse-tête pour moi, on manque de recul quand on le nez dedans toute la journée, alors... komankonfé ?

Merci d'avance pour vos solutions !

PS : désolé si ces questions ont déjà été résolues par ailleurs...

Salut,

Pour constater un peu plus précisément ton problème et être en mesure de t'aider, il serait bien que tu nous fournisses dans l'idéal une page en ligne, ou au moins l'intégralité de ton code, et/ou des images explicatives si nécessaire, comme le recommande la règle 13 du forum.
En l'état, j'ai peur qu'il ne soit difficile de t'apporter une solution.

Eh bien eh bien... je peux donner un peu plus niveau code oui.

Une sélection plus large du code autour du formulaire en question (le reste est un peu plus confidentiel et n'apporterait rien):

<table border="0" cellpadding="0" cellspacing="0" width="100%">
                  <tr><td style="height:1px;width:1px"></td><td style="background-color:#ffffff;height:1px"></td><td style="height:1px;width:1px"></td></tr>
                  <tr><td style="width:1px;background-color:#ffffff"></td><td style="background-color:#fff;padding:5px">
                  <span class="grisfonce" style="font-size:18px;">Passez vos petites annonces</span><br />                  
                  <br />
                  <!-- Zone de recherche -->
                  <table border="0" cellpadding="0" cellspacing="0" width="100%">
                  <tr><td style="height:1px;width:1px"></td><td style="background-color:#717171;height:1px"></td><td style="height:1px;width:1px"></td></tr>
                  <tr><td style="width:1px;background-color:#717171"></td><td style="background-color:#717171;padding:5px">
                  <div id="recherche" style="margin:0px;font-weight:bold">
                  <form method="post" action="annonce.php" style="margin:0px;padding:0px">Recherche&nbsp;<input type="text" name="recherche-annonce" maxlength="200" style="width:300px" />&nbsp;<input type="submit" style="height:20px" value="Lancer la recherche" /></form>
                  </div>
                  </td><td style="width:1px;background-color:#717171"></td></tr>
                  <tr><td style="height:1px;width:1px"></td><td style="background-color:#717171;height:1px"></td><td style="height:1px;width:1px"></td></tr>
                  </table><br />
                  <br />
                  <!-- Zone de catégories -->
                  <table border="0" cellpadding="0" cellspacing="0" width="100%">
                  <tr><td style="height:1px;width:1px"></td><td style="background-color:#e1e1e1;height:1px"></td><td style="height:1px;width:1px"></td></tr>
                  <tr><td style="width:1px;background-color:#e1e1e1"></td><td style="background-color:#f1f1f1;padding:5px">
                  Choisissez une catégorie : 
                  <?                  
                  $sel_cat = mysql_query("SELECT * FROM annonce_categorie ORDER BY categorie ASC");
                  $categories = array();
                  echo "<a href='annonce.php' style='padding-right:10px'>Dernières annonces</a>";                  
                  while ($data_cat = mysql_fetch_array($sel_cat)){
                    echo "<a href='annonce.php?cat=".$data_cat['id']."' style='padding-right:10px'>".$data_cat['categorie']."</a>";
                    $cat_id = $data_cat['id'];
                    $categories[$cat_id] = $data_cat['categorie'];
                  }                  
                  ?>
                  </td><td style="width:1px;background-color:#e1e1e1"></td></tr>
                  <tr><td style="height:1px;width:1px"></td><td style="background-color:#e1e1e1;height:1px"></td><td style="height:1px;width:1px"></td></tr>
                  </table>

Et l'intégralité de la CSS :

body,td{font-family:Tahoma;font-size:11px;color:#717171}
a{color:#065cb4;text-decoration:none;}
a:hover{color:#065cb4;text-decoration:underline}
strong{color:#4891dc}
hr{background-color:#e6e6e6;border:0px;height:1px}
#recherche {color:#fff;text-decoration:none;}
#recherche:hover{color:#fff;font-weight:bold;text-decoration:none;}
#menu a{color:#717171;text-decoration:none;font-weight:bold;}
#menu a:hover{color:#4891dc;font-weight:bold;text-decoration:none;font-weight:bold;}
#compte a{color:#717171;text-decoration:none;font-weight:bold;}
#compte a:hover{color:#4891dc;font-weight:bold;text-decoration:none;font-weight:bold;}
#inscription a{color:#717171;text-decoration:none;font-weight:bold;}
#inscription a:hover{color:#4891dc;font-weight:bold;text-decoration:none;font-weight:bold;}
#footer a{color:#e5e5e5;text-decoration:none;font-weight:bold;}
#footer a:hover{color:#fff;font-weight:bold;text-decoration:none;font-weight:bold;}
input,textarea,select{border:1px solid #b4b4b4;font-size:11px;font-family:tahoma;color:#717171}
input:hover,textarea:hover,select:hover{border:2px solid #b4b4b4}
input[type=text], input[type=password],select{height:20px;}
input[type=submit]{background-color:#4891dc;height:20px;color:#e5e5e5;border:1px solid #065cb4}
input[type=submit]:hover{color:#fff}
fieldset{border:1px solid #e1e1e1}
.vert{color:#065cb4}
.rose{color:#4891dc}
.grisclair{color:#e5e5e5}
.grismoyen{color:#b4b4b4}
.grisfonce{color:#717171}

Et pour l'illustration, l'image que j'avais postée dans mon message précédent n'est pas passée ?

Merci !