28172 sujets

CSS et mise en forme, CSS3

Gros Bug sous IE 6

Slt tous le monde,
je bosse dessus depuis le début de la matinée mais n'arrive pas à trouver la solution.... !

Tout s'affiche correctement sous IE7 / FX et SAFARI mais sous IE 6 toute ma mise en page explose.

Le site est faite de la façon suivante ?

<div id="site">
      <div id="tete"></div>
      <div id="bandeau"></div>
      <div id="corps"></div>
</div>
<div id="pied"></div>


le div bandeau et corps posent problème sous IE6 doivent s'aligner cote à cote normalement. 


#corps { overflow:hidden; margin:0; background: url(../images/bckg_corps.png) repeat-x left top; padding:0; }

#bandeau { margin:0; padding: 0 0 0 7em; background:url(../images/background_bandeau_g.jpg) no-repeat left top; width:18.7em; float:left; }


Pour mieux visualiser : http://www.forumurgence.org

Merci de vos conseils
Une largeur en em ce n'est pas très judicieux Smiley ohwell

Sinon le problème devrait se résoudre avec une marge gauche sur ton bloc corps de la largeur du bandeau.
Bonjour,

Pas sûr d'avoir saisi exactement d'où vient ce bug, mais je dirais que c'est parce qu'IE6 n'applique pas de contexte de formatage quand tu utilises un overflow:hidden sur le conteneur de droite, et donc que la largeur de ce conteneur de droite ne s'adapte pas au flottant qui le précède.

Pour obtenir le même effet dans IE6 sans passer par une marge (margin-left), il faudra à priori utiliser le HasLayout.

À lire:
http://www.alsacreations.com/tuto/lire/588-trois-colonnes-float.html
http://www.alsacreations.com/article/lire/76-haslayout-internet-explorer.html
Bonjour,
En prenant strictement ton code et en remplaçant par de fausses images, l'affichage est ok chez moi (IE6).

En revanche, http://www.forumurgence.org fonctionne effectivement mal avec IE6...

Le problème ne viendrait pas de cette image, insérée en dur? Smiley cligne 

<div class="both"><img src="images/background_bandeau_d.jpg"/></div>
Concernant l'image, je viens de tester en local mais toujours le même problème
J'ai créer un style :

#images_nimes { clear:both; background: url(../images/background_bandeau_d.jpg) no-repeat left top; height:174px;}


que j'ai insérer dans mon code....
<div id="corps">
	<div id="images_nimes"></div>


Même bug....
Pourrais tu me dire comment as tu procédé ?
merci
Bon, j'ai bien avancé sur mon problème d'affichage sur IE6 que j'ai pratiquement résolu en rajoutant un "FLOAT:LEFT" au div "CORPS".

par contre maintenant le problème et lié au "FLOAT:LEFT" qui vas adapter sa largeur au contenu (ce qui est normale) et lorsque je mets un "WIDTH:100%" il me bascule mon div "CORPS" a la ligne du div bandeau ????
a écrit :
Pourrais tu me dire comment as tu procédé ?
Pour ton image? J'ai visualisé ta page avec Firebug, extension pour Firefox qui permet de visualiser code + css… Le même genre d'extension existe pour IE, je crois que ça s'appelle IE DevToolBar, ou quelque chose de ce goût-là. Perso, je le trouve bien moins pratique de Firebug Smiley ravi
Sujet clos
Aller à