Problème avec line-height sous IE6

Bonjour

J'ai un probleme d'affichage dans un formulaire généré dynamiquement.

Ci-joint, une image montrant la différence entre FF et IE6. J'aimerais savoir s'il y aurait un hack à faire sous IE pour parvenir à mes fins!! En effet, il semblerait que le line-height ne soit pas reconnu sous IE



HTML

<div id="form">
<ul>
...
<li>
<div>
<label for="txt1" id="lbl1">Stopway :</label>
<input type="text" id="txt1" />
<span>meters</span>
<span>X</span>
<input type="text2" id="txt2" />
<span>meters</span>
</div>
</li>
...
</ul>
</div>

CSS

.form ul
{
    margin : 0;
    list-style-type : none;
    list-style-image : none;
}

.form li
{
    background-image : none;
    padding : 0;
}

.form div
{
    padding : 1px 0;
}

.form div span
{
    vertical-align : middle;
    line-height : 22px;
}

.form div label
{
    display : block;
    float : left;
    width : 265px;
    text-align : right;
    vertical-align : middle;
    margin-top : 5px;
    margin-right : 10px;
}

Faites moi savoir si vous avez besoin de plus d'informations.

Merci énormément de votre aide.
Modifié par Jeepi196 (19 Feb 2009 - 17:29)

Salut,
Il y a bien un petit hack à faire ^^

.form div span

{

    vertical-align : middle;

    line-height : 22px !important;
    line-height: 20px /* J'ai mit vingt, mais tu peux changer en testant */

}

Voila, le hack "!important" va appliquer le line-height sur toutes les versions des navigateurs sauf ie6.

Bon alors déjà les hacks c'est le mal, sur quel ton faut le répéter pour que ça imprime les neurones?
Hacks, pas bien: http://www.alsacreations.com/astuce/lire/39-quest-ce-quun-hack-a-quoi-servent-ils.html
Commentaires conditionnels, bien (car fiable et impact connu), mais à utiliser aussi peu que possible bien entendu: http://www.alsacreations.com/astuce/lire/48-commentaires-conditionnels.html

Ensuite, IE6 comprend généralement la propriété line-height, mais il arrive que la hauteur de ligne soit agrandie par la présence d'un contenu plus haut (texte plus grand, images, champs de formulaire...), et/ou que l'alignement vertical des éléments se fasse mal dans ce cas. De plus, je ne suis pas sûr que le vertical-align sur les SPAN passe toujours bien (à l'inverse d'éléments remplacés comme les images et champs de formulaire), mais là c'est une supposition en l'air.

Quoi qu'il en soit, je te conseille à tout hasard:
- de définir le line-height au niveau d'un élément de type bloc (ou en rendu de type bloc), le conteneur ou un paragraphe par exemple;
- de ne pas figer les hauteurs de ligne en pixels (les hauteurs figées, c'est le mal aussi);
- de bien appliquer un vertical-align:middle aux champs de formulaire.

Tout d'abord, merci pour vos réponses constructives et surtout rapides

J'ai reglé un problème en retirant le style appliqué sur le span et en ajoutant vertical-align : middle aux textbox

Du coup, je me suis dit que je pouvais faire la meme chose avec les label associés à ces textbox (mettre vertical-align : middle au lieu de mettre un margin-top : 5px) mais cela ne fonctionne pas!! J'aimerais que tout soit verticalement aligné au milieu puisque le texte du label peut être sur quelques lignes et le reste doit suivre!

HMTL

<div id="form">
<ul>
...
<li>
<div>
<label for="txt1" id="lbl1">Stopway :</label>
<input type="text" id="txt1" />
<span>meters</span>
<span>X</span>
<input type="text2" id="txt2" />
<span>meters</span>
</div>
</li>
...
</ul>
</div>

CSS

.form ul
{
    margin : 0;
    list-style-type : none;
    list-style-image : none;
}

.form li
{
    background-image : none;
    padding : 0;
}

.form div
{
    padding : 1px 0;
}

.form div label
{
    display : block;
    float : left;
    width : 265px;
    text-align : right;
    vertical-align : middle;
}

input.inputTextShort, input.inputTextLong, select.dropDownList
{
    font-family: Verdana;
    margin : 0 5px;
    border : solid 1px #A7A6AA;
    vertical-align : middle;
}

.required
{
    background-color : #FECACA;
    border-color : #E41B17;
}

input.inputTextShort
{
    width : 50px;
    padding : 2px;
}

input.inputTextLong
{
    width : 150px;
    padding : 2px;
}

select.dropDownList
{
    width : 156px;
    margin-top : 1px;
}

Si une meilleure structure du CSS existe, je suis bien ouvert et j'aime apprendre!

Merci encore une fois

PS : J'ai un soucis au niveau de l'ordre des classes de styles appliquées à mes textbox.

Voici une image montrant le problème sous FireBug:



Comme vous le voyez, la classe "required" devrait etre appellée apres la classe "input.inputTextShort/Long" mais cette dernière écrase le style de "required".

"required" applique un fond rouge pale et une bordure rouge foncée au textbox.
"inputTextShort/Long" applique le style par défaut du textbox, fond blanc et bordure grise.

Le textbox devrait etre comme ceci :


Modifié par Jeepi196 (19 Feb 2009 - 17:35)