[Résolu] Décalge de champs sous FF (IE & Opéra OK)

Sur la page suivante, il faut regarder le formulaire en bas :
http://www.ece.fr/~lavoillo/tmp/

le CSS correspondant est:

#main fieldset {
  margin: 0.5em;
  padding: 1em;
  border: 1px dotted black;
  text-align: left;
}
#main fieldset p {
  width: 100%;
  margin: 1em;
}

#main legend {
  margin: 0.3em 0;
  padding: 0.2em 0.5em;
  height: 1.2em;
  line-height: 1.2em;
  font-size: 1em;
  background-color: #ccf;
  border: 0;
}

#main input, #main select, #main textarea {
  margin: 1em;
  margin-left: 22%;
  display: block;
}

#main label {
  border: 0;
  margin: 1em;
  display: block;
  float: left;
  clear: both;
  width: 20%;
}

Je ne comprend pas d'où vins le décalage vers la droite de certains champs sous Firefox...
Modifié par streetpc (16 Feb 2006 - 23:26)

personne n'a d'idée ?

J'ai fait vingt minutes de tests (avec Webdevelopper toolbar) sans rien trouver. J'avoue que là...

Sinon, un petit tableau à deux colonnes ?
Les puristes sémanticiens hurleront à la lune, mais ça peut se défendre comme choix (y compris sémantiquement parlant).

bonjour,
ton decallage provient de l'usage du display:block; que tu as probablement voulu utiliser pour compenser un bug de IE !? (flottant qui remontent malgré un clear both; )
l'idée du display block est bonne, mais a appliqué plutot a une balise qui englobera le couple label et son "champs". par exemple:
le css repris:

#main input, #main select, #main textarea {
  margin: 1em;
}

#main label {
  border: 0;
  margin: 1em;
  float: left;
  clear: both;
  width: 20%;
}

et le formulaire avec ses balise block englobante en plus, la un simple <p></p>:

<h1>Form test</h1>
      <form action="#" method="post">
        <fieldset>
          <legend>Première partie du formulaire</legend>
          <hr width="25%" align="left" />
          <!--label for='in1'>Premier champ :</label> <input type='text' size='20' id='in1' />
          <label for='in2'>Deuxième champ :</label> <input type='file' size='20' id='in2' />
          <label for='in3'>Troisième champ :</label> <input type='password' size='20' id='in3' />
          <div class='radio_checkbox'>
            <span>Option :</span>
            <input type='radio' name='opt' id='in4' /> <label for='in4'>Opt1</label>
            <input type='radio' name='opt' id='in5' /> <label for='in5'>Opt2</label>
          </div-->

          
<p>
<label for='in6'>Commentaire :</label> <textarea cols='50' rows='3' id='in6'></textarea>
</p>

<p><label for='in7'>Liste :</label>
          <select id='in7'>
            <optgroup label='Europe'>
              <option>France</option>
              <option>UK</option>

              <option>Germany</option>
            </optgroup>
            <optgroup label='USA'>
              <option>Washington DC</option>
              <option>Virginia</option>
              <option>Colorado</option>
            </optgroup>

          </select>
</p>
<p>
          <label for='in8'>Liste multiple :</label>
          <select id='in8' multiple='multiple'>
            <optgroup label='Europe'>
              <option>France</option>
              <option>UK</option>
              <option>Germany</option>

            </optgroup>
            <optgroup label='USA'>
              <option>Washington DC</option>
              <option>Virginia</option>
              <option>Colorado</option>
            </optgroup>
          </select>
</p>
<p>
          <label for='in2'>Deuxième champ :</label> <input type='file' size='20' id='in2' />
</p>

        </fieldset>
        <fieldset>
          <legend>Deuxième partie du formulaire</legend>
          <div class='radio_checkbox'>
            <input type='checkbox' name='chk' id='in9' /> <label for='in9'>Checkbox</label>

          </div>
          <label for='in10'>Dernier champs :</label> <input type='text' size='20' id='in10' />
          <label for='go'></label> <input id='go' type='submit' value='Envoyer' />
        </fieldset>
      </form>

a plus

c'est effectivement ce que j'ai fait pour corriger le problème, même si la sémantique m'en paraissait douteuse, je l'ai vu à d'autres endroits alors...
Quoiqu'il en soit, merci de vos réponses !
Modifié par streetpc (16 Feb 2006 - 14:12)