[resolu] Label disparait avec display:block et float:left

Voilà j'essaie de mettre en forme un formulaire en CSS.

J'ai mes differents input placés dans une liste <ul><li>

Dans un <li> je place le <label> et son <input>

pour le label j'ai défini en CSS :

.form label
{
  display: block;
  float: left;
  width: 355px;
}

et le code xhtml

       <div class="box">
          <h4 class="title">Connexion</h4>
          <form action="index.php?login" method="post" class="content form" id="loginbox">
            <ul>

              <li>
                <label for="nick">Nom d'utilisateur</label>
                <input id="nick" name="nick" type="text" maxlength="24" class="text" />
              </li>
              <li>
                <label for="password">Mot de passe</label>
                <input id="password" name="password" type="password" class="text" />
              </li>

              <li>
                <label for="cookie">Se souvenir de moi</label>
                <input id="cookie" name="cookie" type="checkbox" class="checkbox" />
              </li>
              <li>
                <input type="hidden" name="postback" value="postback" class="hidden" />
                <input type="submit" class="submit" value="Me connecter" />
              </li>

            </ul>
          </form>
        </div>

Ce qui marche dans Firefox mais pas dans IE, le label disparait.

Pour que ca marche dans IE je dois faire display: inline-block et supprimer le float. Mais à ce moment c'est dans Firefox que ca ne va plus (inline-block ne fait rien)

Y a t'il moyen de mettre tout le monde d'accord ?

pour voir en pratique ce que ca donne :
http://users.skynet.be/fb213023/index.html

Merci de votre aide.
Modifié par Onizuka (30 Aug 2005 - 13:27)

Bonjour,

en gardant ton

.form label
{
  display: block;
  float: left;
  width: 355px;
}

il faut activer dans IE une qualité paticulière des éléments de liste <li> pour éviter ce bug d'IE Win : le layout.

Tu peux le faire en particulier avec :
- un li {width: 100%}, ou height:... (peu importe la valeur).
- sinon, un zoom: 1 dans une css en commentaires conditionnels (c'est une extension CSS invalidante) fera l'affaire sans effets de bord, mais uniquement dans IE5.5 et 6.0 (pas dans IE5.0).

Je viens tout juste de réussir à faire passer mon block + float dans IE6 en faisant :

.form label
{
  display: block;
  float: left;
  position: relative;
  width: 355px;
}

Le position: relative semble tout changer. Je ne sais pas pourquoi mais bon ...