[résolu] I.E le padding d'un élément fait déborder son parent

Bonjour,

Pour une barre de navigation avec onglet, j'ai appliqué les "portes coulissantes" non pas à une liste mais à des liens contenant l'élément <span>.

Tout allez bien dans le meilleur des monde jusqu'au moment où j'ai jetté un oeil au rendu sous IE6 pc.

Là, j'ai vu que sous IE le padding d'un élément pousse le padding de son élément parent. Tandis que visiblement, sous FF, le padding d'un enfant n'influe pas sur le padding de son parent.

Avant de me lancer dans l'aventure des hack pour IE, ou de finalement utiliser une liste non ordonnée, je viens vous demander de l'aide pour mieux comprendre ce comportement (il y a forcement quelque chose qui m'échappe).

Voici le code XHTML :

<div id="menu">
<a id="curent"><span>Moteurs</span></a>
<a href="#"><span>Remorques</span></a>
</div>

et le CSS :

#menu 
{border-bottom:1px solid #069; 
padding:0 0 2px 5px}
[#red]#menu a 
{background:url("../images/1pt.gif") no-repeat left top; 
margin-left:5px; padding:3px 0 2px 9px;	
text-decoration:none; color:#fff; font-weight:bold;} 
#menu a span
{background:url("../images/1gd.gif") no-repeat right top; 
padding:3px 9px 2px 0; } [/#]
#menu a#curent 
{background-image:url("../images/2pt.gif") ; 
color:#069; 
padding-bottom:3px;}	
#menu a#curent span 
{background-image:url("../images/2gd.gif") ;
padding-bottom:3px;}

Ce que je comprend, c'est que la balisse <a> déborde en haut et en bas car le padding de <span> vient s'ajouter au sien. Bien sure suprimer tout padding est possible, mais visuellement ça ne passe pas, donc je m'acharne ^^.

J'ai donc pensé à faire la déclaration CSS calibrée pour IE puis, en utilisant le hack de Celik Tantek qui bluf IE, donner des valeurs qui collent bien sous les autres navigateurs.

Il doit forcement y avoir d'autres alternatives, pouvez vous m'éclairer s'il vous plait?
Modifié par Hermes (27 Jun 2006 - 11:05)

Bon visiblement cela vient du fait que l'élément parent est de type inline. Si j'utilise "display: block" le padding de l'enfant ne pousse plus son padding.

Pas vraiment "résolu", je n'ai pas trouvé de moyen concluant pour remédier à ce bug, je vais utiliser une liste non ordonnée.

En cherchant encore j'en ai déduit qu'IE reportait la hauteur du contenu et du padding de l'élement enfant sur la hauteur du contenu de son parent.

J'ai utilisé un sélecteur d'enfant pour blufer Explorer et ça marche à merveille.

Ceci étant, je ne parviens toujours pas à bien comprendre l'origine du bug. Modèle de boîte? Autre bug ?

Si quelqu'un qui à plus de connaissances en théorie peut m'éclairer ça serait sympa

En attendant je cherche de mon côté sur ce doccument http://www.maalwe.info/test/index.html

Peut être est ce la même chose que ce dont traite mpop ici :
http://web.covertprestige.info/test/04-blocs-imbriques-et-fusion-des-marges.html

Bon, finalement j'ai opté pour un petit hack qui règle le probleme : un sélecteur d'enfant; du coup hop :[résolu] ^^

Merci pour ce lien Jedi, c'est peut-être liée au layout en effet... je vais continuer à m'arracher les cheuveux, mais soyons honnête : c'est tellement bon.