Discussion :

[pacpacapero]

Bonjour à tous,

je travaille sur un site à vocation professionnelle et je veux impérativement le rendre compatible IE6, ainsi que valider des normes d'accessibilités (AA standards).

Mon probleme vient de l'utilisation de labels dans une div de menu vertical censée contenir des champs de login.

Les normes d'accessibilité m'imposent d'utiliser des labels pour chaque balise input. Sous Firefox ou IE7 tout se passe tres bien, mais IE6 bug ... (comme toujours) et il élargit ma div de 150px à environ 200px lors de l'utilisation de ces labels, ce qui a pour effet de rendre le site visuellement horrible pour nimporte quel utilisateur d'IE6 :/

Pouvez vous me dire si il existe une parade, qui me permettent de respecter ces contraintes d'accessibilité et de compatibilité ??

code CSS de la div contenant le form (aucun pb a priori) :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
#left {
float:left;
width: 150px;
margin: 0px 0px 0px -5%;
border: 1px solid #eee;
background-color: #c3c3c3;
}

Code HTML épuré du contenu de la div "left" :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
<form action="#">
  <ul style="list-style:none; text-align:center">
    <li><label for="user">User: </label><input id="user" name="user" type="text" accesskey="2" tabindex="110" size="13" title="User Name Field" value="username" OnFocus="this.value=''" /></li>
    <li><label for="password">Pass: </label><input id="password" name="password" type="password" tabindex="111" size="13" title="Password Field" value="password" OnFocus="this.value=''" /></li>
  </ul>
  <br />
  <input type="submit" tabindex="112" value="Submit" name="Submit" />
</form>

et un petit screenshot pour l'occasion si jamais c'était pas clair :


Merci d'avance pour vos suggestion.

[kaiser59]

Salut,

Amuse toi avec le hack ie6 qui est valide w3c, ainsi seul les éléments bougerons sur ie6

Pour info hack ie6 :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

* html nomduid ou nomclass {margin:0;}

[Candygirl]

Difficile de se rendre compte exactement du problème sans tout le contexte.

code CSS de la div contenant le form (aucun pb a priori) :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
#left {
margin: 0px 0px 0px -5%;
}

Les margin négatifs posent problème à IE6 dans certains cas. Rajouter un position:relative; sur l'élément en question pourrait améliorer les choses.