[RESOLU] Hauteur d'un DIV non respectée sous IE

Bonjour,

Petit montage CSS très simple, d'un bloc "principal" contenant 3 autres DIV (haut, centre et bas). Aucun contenu dans ces conteneurs pour le moment.

<div id="principal">
  <div id="haut"></div>
  <div id="centre"></div>
  <div id="bas"></div>
</div>

Dans les CSS, j'applique une hauteur à "haut" et à "bas".

#principal {
margin: 0 auto 0;
width:780px;
}

#haut {
height:25px;
background-color:blue;
}
#centre {
height:100px;
background-color:green;
}
#bas {
height:10px;
background-color:red;
}

Sous Firefox et Netscape l'affichage est logique (enfin il me parait cohérent) mais sous IE 6 la hauteur de "bas" est supérieure aux 10px demandés.

Pas de margin ni de padding dans un bloc si je ne me trompe (j'ai quand même essayé de les placer à 0 et ça n'a rien changé), et pas de contenu non plus. Alors qu'est-ce qui peut provoquer cette interprétation différente.

Merci à celle ou celui qui saura m'éclairer car je tourne autour depuis un moment sans succès

Bonne journée
Modifié par Philos (27 Jun 2006 - 11:13)

Je viens de tester une hauteur pour "bas" supérieure à 20 pixels et là IE affiche correctement. J'en conclue que c'est la faible hauteur (à priori je dirai en dessous de 18 pixels) qui déplaît à IE ?

Ca me rappelle les soucis de calage de hauteurs de lignes de cellules en montage en tableau... mais pourquoi donc ?

Edit :
Après avoir lu : http://forum.alsacreations.com/topic-4-9631-1-Hauteur-minimale.html[/url]
J'ai posé line-height:0; sur "bas" mais aucun changement sous IE... étrangement puisque cela semble avoir fonctionné pour d'autres...
Modifié par Philos (27 Jun 2006 - 11:08)

Bonjour,

Voir la FAQ (Hauteur minimale des éléments sous IE)

IE n'affiche pas de hauteur inferieure a 16px.
Il y a une solution pour lui imposer des hauteurs inferieures c'est le line-height a condition que tu mettes dans ton div un contenu texte ou img ou a la limite un l'espace insecable:  

Merci Alan, j'ai édité en même temps que tu postais ta réponse.

J'ai appliqué l'histoire du line-height mais je ne vois aucune modification à l'affichage. Je vais relire mon code au cas où.

jp94 a écrit :
ou a la limite un l'espace insecable:  

Ahhh

Je teste ça

Edité :
Oui, merci pour ce rappel, evidemment, pas de contenu pas d'effet du line-height avec l'espace insécable c'est parfait.

Merci à tous et bonne journée !
Modifié par Philos (27 Jun 2006 - 11:12)