Bloc DIV vide sous IE7

[JJJ]

Bonjour,

je me casse la tête depuis quelques semaines à trouver l'origine d'un bug incompréhensible. Un site xhtml 1.0 transitionnal qui passe la plupart des validateurs, niquel sur tous les navigateurs sauf IE 7 en particulier.

J'ai cru un temps que l'intégration d'un peu de flash était à l'origine du problème, puis des commentaires html mal rédigés ou mal placés, ou un DIV manquant.

En fait c'est peut-être plus subtil, un souci de positionnement de layout et absolute/relative entre conteneurs parents et enfants qui m'a été inspiré par cette page.

Mais je n'arrive vraiment pas à solutionner ni à m'assurer que ça vient bien de là.

Le symptôme c'est que le contenu du corps de page n'apparaît pas sous IE7, ni le menu latéral droit.

Pour l'exemple :

Le rendu devrait correspondre à ça (essayez avec autre chose qu'IE7 bien sûr) :

http://larbreauxfruits.free.fr/dev/index.php

Ce contenu de corps de page est dans un conteneur <div id="left_side"> </div> , lui-même contenu dans <div id="content_wrapper"> </div>

Le reste (header,footer,menu latéral) est inclus via php.

C'est quand j'ai supprimé <div id="left_side"> </div> que j'ai fini par identifier un début de piste, parce que là pour le coup j'ai mon menu latéral qui revient et du contenu central aussi.

Exemple (essayer avec IE7) :

http://larbreauxfruits.free.fr/dev/no_div_left_side.php

J'ai vidé le contenu original pour que ce soit plus clair et remplacé par un peu de texte exemple.

Et voilà la même page brouillon si je remets les balises DIV :

http://larbreauxfruits.free.fr/dev/draft_left_side.php

On constate que le même texte exemple disparaît à son tour (sous IE7)

Ce qui est aberrant pour moi et qui m'empêche de résoudre la chose, c'est que seul l'affichage IE7 est concerné. Jusque là je me fiais à mon vieux IE6 en considérant que les versions supérieures ne pouvaient pas planter mon code. D'où je ne l'ai même pas installé, j'utilise ipinfo.info/netrenderer/ ...

Quelqu'un a une idée ?

[buh]

En fait c'est peut-être plus subtil, un souci de positionnement de layout et absolute/relative entre conteneurs parents et enfants qui m'a été inspiré par cette page.

Bonsoir

Au début tu parles qu'il s'agit peut être d'un problème de layout.

As-tu essayé alors de donner ce layout à la div #content_wrapper en lui donnant un width de 730px par exemple car le conteneur global a une largeur de 760px et le #content_wrapper ayant une marge de chaque côté de 15px.

[JJJ]

Je vais jeter un oeil. mais je m'emmêle encore pas mal dans la manipulation efficace des layouts.

[buh]

... ????? suite à ma dernière réponse je comprends pas ce que tu veux dire exactement par

je m'emmêle encore pas mal dans la manipulation efficace des layouts.

[JJJ]

Entre les tailles de bloc et les positionnement absolute/relative, je patauge parfois à m'y retrouver et je fais un peu au feeling. Quoique là encore j'ai pas énormément d blocs à imbriquer non plus.

[buh]

Entre les tailles de bloc et les positionnement absolute/relative, je patauge parfois à m'y retrouver et je fais un peu au feeling. Quoique là encore j'ai pas énormément d blocs à imbriquer non plus.

Mmmm je me demande si tu as compris ma première réponse.

En plus clair ouvre ton fichier style.css

Cherche ces lignes de code

#content_wrapper {

position:relative;/* propriétés position conteneur ancêtre pour lien retour haut ; */

margin-top:10px;

margin-bottom:0px;

margin-left:15px;

margin-right:15px;

clear:both;

}

maintenant ajoute cette ligne

width:730px;

ce qui doit te donner par exemple :

#content_wrapper {

position:relative;/* propriétés position conteneur ancêtre pour lien retour haut ; */

margin-top:10px;

margin-bottom:0px;

margin-left:15px;

margin-right:15px;

clear:both;

width:730px;

}

Enregistre ton fichier puis retourne dans ton navigateur et rafraichis la page avec la touche F5

Peux pas faire plus

Modifié 11 Juin 2008 par buh

[JJJ]

C'est en test ici

http://larbreauxfruits.free.fr/dev/index.php

Le content_wrapper fait maintenant 730 de large.

Concrètement Firefox s'en arrange toujours très bien, mais le contenu fantôme subsiste sous IE7.

Sous ie6 on a :

et sous ie7 :

(d'après http:/*ipinfo.info/netrenderer )

Incroyable, non ?!

[buh]

Le content_wrapper fait maintenant 730 de large.

En es-tu bien sûr ?

Voilà ce que me donne Firebug

#content_wrapper {

position:relative;/* propriétés position conteneur ancêtre pour lien retour haut ; */

margin-top:10px;

margin-bottom:0px;

margin-left:15px;

margin-right:15px;

clear:both;

}

pour voir si le code n'avait pas inséré ailleurs, j'ai vérifié et il n'y a aucun width à 730px.

Après avoir ajouté ce code, le fichier a-t-il été sauvegardé ?

[buh]

Pour info voilà ce que j'obtiens sous IE7