Problème legend dans balise fieldset IE6/7

Bonjour à tous,

Je suis actuellement en train de créer un blog (avec Wordpress) et j'ai repris un existant pour créer mon moteur de recherche où la balise fieldset/legend/label est utilisée.

Je souhaite que la legend "Rechercher" soit alignée à gauche au label et à l'input text. Tout se passe bien sur Firefox mais un décalage réside sur IE6/7...Voilà le rendu sous les 2 navigateurs :

- Firefox :



- IE :





Quelqu'un connaît-il une astuce pour remédier à ce problème ? Voici mon code :

Dans la feuille css :

fieldset.searchclear {
  clear : both; 
}

form#searchform {
  margin-bottom : 15px;
}

form#searchform fieldset {
 margin-left :0px;
 border : 0;
 margin-top : 10px;
 
 
}


form#searchform fieldset legend {
  padding-left : 0px;
  margin-left :0px;
  font-weight : bold; 
  font-size:12px;
  color : #75675f;
  padding-left:0px;
  
}

form#searchform label, #s {
  width : 65%;
  padding-left:0px;
  color : #75675f; 
  margin-top : 5px;
  padding-left:0px;
  font-size : 11px;
}


form#searchform input.rech {
  font-family: arial, sans-serif; 
  color : #75675f; 
  padding : 1px; 
  border : 1px solid #ccd22c;
  background-color : #ffffff;
  font-size : 11px;
  height : auto;
  width:65%;

}

Dans mon fichier php :

<form method="get" id="searchform" action="<?php echo $_SERVER['PHP_SELF']; ?>">
 <fieldset class="searchclear">
  <legend>Recherche</legend>
   <label for="s">Entrez votre mot-clé : <br />
    <input class="rech" type="text" size="2" maxlength="100" value="<?php echo wp_specialchars($s, 1); ?>" name="s" id="s"/><input class="button" type="submit" id="searchsubmit" title="Cherche dans <?php bloginfo('name'); ?>" value="Ok" /></label>
 </fieldset>
</form>

En même temps, je souhaiterai comprendre à quoi sert le "clear:both" dans "#searchclear" => ce n'est pas moi qui l'est mis, c'était déjà comme ça quand j'ai repris le modèle.

Merci !!

Salut,

un margin-left négatif sur l'élément legend dans une css corrective pour IE en commentaire conditionnel devrait suffire.

Mais bon tu te prends la tête pour pas grand chose je trouve. On peut tout styler bien sur et on peut s'acharner sur tout, pixel par pixel. Mais ça n'en vaut sans doute pas la peine.

Enfin, c'est toi qui vois

louloute8091 a écrit :

je souhaiterai comprendre à quoi sert le "clear:both"

Re salut,

1. Toujours mettre un point virgule à la fin d'une déclaration de propriété/valeur de style, ne te demande même pas pourquoi ni si c'est parfois non obligatoire, fais le un point c'est tout.

2. Ouvrir la page http://google.fr

3. Mots clé > clear:both;

4 Enjoy

5. Penser à ne pas poser deux questions sans aucun rapport dans un même sujet. Je te dis ça, c'est parce que ta deuxième question, dans un premier temps, je ne l'avais même pas vue...
Modifié par Christian Le Bouler (11 Apr 2007 - 14:06)

a écrit :
1. Toujours mettre un point virgule à la fin d'une déclaration de propriété/valeur de style, ne te demande même pas pourquoi ni si c'est parfois non obligatoire, fais le un point c'est tout.

Ok mais je l'avais bien mis dans mon code si tu regardes bien.

a écrit :
un margin-left négatif sur l'élément legend dans une css corrective pour IE en commentaire conditionnel devrait suffire.

Comment fais-tu pour spécifier uniquement sur IE ?

Je me prends peut-être la tête mais je souhaite faire quelque chose de propre ... c 'est mon côté cartésien

Pour les commentaires conditionnels, voir la FAQ. Ou sinon une petite recherche sur le forum..