Encors un problem avec IE

Salut a tous,

j'ai un probleme de height avec IE. En fait j'ai un cadre qui entour un titre. (c'est une image de fond découpé en 3).

Sur ff j'ai un bon affichage:
http://manganime.0.free.fr/fichiermanganime.0/sousFF

mais sur IE ca déconne (étonnant non?)
http://manganime.0.free.fr/fichiermanganime.0/sousIE

Comme si le height que j'avais défini faisait le double.

Voici le code concerné:
[/img]

Code:

---

1 2 3 4 5 6 7

<div style="margin:0; padding:0; background-image:url(../imagesite/fondtitretop.jpg); line-height: 10px; width: 580px; height:10px; margin-left: auto; margin-right: auto;"> </div> <div style="margin:0; padding:0; background-image:url(../imagesite/fondtitremiddle.jpg); width: 580px; height:auto; margin-left: auto; margin-right: auto;"> <h1 align="center" style="padding:0; margin:0; "><? echo $titre.' '.$tome;?></h1> </div> <div style="margin:0; padding:0; background-image:url(../imagesite/fondtitrebottom.jpg); width: 580px; height:10px; line-height: 10px; margin-left: auto; margin-right: auto;"> </div>

---

repeat:no-repeat; devrait aider un brin

Après les valeurs de hauteurs ou largeur sous IE et FF sont différente en fonction de ce que tu a mis avant dans ton code (float, border, etc...)

Donc pas d'autre choix que de jouer avec les Hack CSS et expression(''); pour IE ;)

heu tu as 3 divs et tu leur colle à cahcun un background-image ...
le resultat est normal ...

le no repaeat ne change rien :(.

en fait ces block sont dans un div:

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13

<div style="width:100%; height:auto;overflow: hidden">   <div class="cadreimagecritique" align="center" > <div style="margin:0; padding:0; background-image:url(../imagesite/fondimagetop.jpg); width:325px; height:17px; line-height:17px;"> </div> <div align="center" style="margin:0; padding:0;background-image:url(../imagesite/fondimagemiddle.jpg); width:325px; height:310px; "> <img id="imagemanga" <?  if($height[1]!=300){echo 'width="300" height="'.$width[1]*$ratio[1].'"';}else{echo 'height="300" width="'.$height[1]/$ratio[1].'"';}?> src="<? echo $imagemanga[1]?>" alt="" style="margin:0; padding:0;"> </div> <div style="margin:0; padding:0; background-image:url(../imagesite/fondimagebottom.jpg); width:325px; height:16px; "> </div>     </div>

---

avec le css:

Code:

---

1 2 3 4 5 6 7 8 9 10 11

.cadreimagecritique { width:auto; height:auto;   float:left; margin-left:20px; margin-right: 20px; padding:10px;   }

---

Mais je vois vraiment pas comment faire pour remédier a se problem.

Citation:

---

Envoyé par SpaceFrog

heu tu as 3 divs et tu leur colle à cahcun un background-image ...
le resultat est normal ...

---

Je dois faire quoi alors?
peut etre mettre l'image dans le cadre haut et nas et juste garder le background suur celui du centre.

Je vais essayer ca.

C'est bon j'ai trouvé;

overflow: hidden et ca marche nickel.

J'ai un epetite question d'ailleur.

A quoi ca sert exactement overflow? (a part corriger les bug d'IE)

overflow en fait ca sert à gérer tona ffichage lorsque le contenu de ton conteneur (mouarf) est plus grand que ce dernier. en auto il mettra un scroll si le contenu est plsu grand, en scroll il y aura toujours un scroll (vertical et hoirzontal, à savoir que overflowX et overflowY ne fonctionnent que sous IE il me semble, à verifier)