Bonjour à tous. Cela fait un petit bout de temps que je cherche des solutions à ce problème récurent: mon bloc "menu" et mon bloc "contenu" s'affichent mal sous IE.
La raison ? Visiblement, un [b]float[/b] mal interpreté ou mal placé (je ne sais pas). Voyez par vous-même sur cet exemple:


au lieu de:


Récemment, un internaute est venu me trouver après avoir constaté le problème et m'a suggéré d'utiliser un "breaker", c'est à dire un bloc dont le seul attribut serait "clear: both;". Ca n'a pas fonctionné, mais j'ai pas mal cherché dans cette direction malgré tout... Bref, quelqu'un pourrait-il m'éclairer sur mon problème ? Car il paraît que c'est vraiment "bénin", et ça me fait râler.

Voici un cartouche (très simplifié) du code que j'utilise:

CSS


HTML


J'ai cherché sur le forum avant de poser ma bête question; j'ai essayé avec "clear", "breaker", "décalage IE", etc... Je n'ai rien trouvé de vraiment semblable à mon problème.
Merci d'avance pour votre aide =)

Hello,

Il y a déjà un truc illogique dans ton css:
Tu définis un body à 960px, puis tu mets dedans un #all de 960, mais avec un padding latéral de 5 et un border de 2*3px, soit un total de 976px. Du moment que tu as un conteneur global, tu n'as pas besoin de donner une taille au body, tu donnes simplement le margin auto au #all:



Ensuite, tu mets un width de 790 sur ton corps avec un padding latéral de 10 et un margin-left de 160, soit un total de 970, donc trop raport à ton 960. Comme IE estime qu'il n'y a pas a place, il passe le corps au-dessous.

Le pb c'est que même avec 780 de width ton corps passera en bas à cause d'un bug d'IE qui rajoute 3px. La meilleurs solution est de passer ton corps en float et de rajouter un clear dans ton footer:



EDIT: Dans un cas comme le tiens, avec une taille fixe, ma solution est meilleure que celle que tu as adoptée pour 2 raisons:

- Elle ne fait pas apparaître le bug des 3px alors qu'il est toujours présent chez toi même si peu visible. Regarde le décalage sur ton texte une fois le menu terminé:

Citation

C'est organisé un peu à la bourre, mais je suis curieux de voir ce que ça va donner.
(3px de décalage)Toutes les infos et les inscriptions se trouvent là:

Dans ce contexte ça se voit très peu mais si un jour tu plantes une image ou un tableau un eu trop grand ça sera plus ennuyeux (ou encore s'il apparaît au milieu d'une liste à puces).

- Elle établit un nouveau contexte de formattage et donc si un jour tu as un clear dans ton contenu ce dernier ne clearera pas ton menu.</span>

Hello.
Merci beaucoup pour ces explications, mais en grand débutant que je suis, je ne saisis pas tout.
Jusqu'ici ça va:

Citation : Candygirl

Le pb c'est que même avec 780 de width ton corps passera en bas à cause d'un bug d'IE qui rajoute 3px.

Mais après j'ai un peu de mal.

Citation : Candygirl

La meilleurs solution est de passer ton corps en float et de rajouter un clear dans ton footer

Quelle nuance cela apporte-t-il de mettre le corps en float plutot que le menu ?

Citation : Candygirl

- Elle établit un nouveau contexte de formattage et donc si un jour tu as un clear dans ton contenu ce dernier ne clearera pas ton menu.

Là je ne peux pas vraiment comprendre car le "clear", on me l'a suggéré. J'ai un peu recherché sur cet attribut, mais je ne comprends pas exactement son effet. Dès lors, je ne vois pas vraiment l'effet produit si je le place dans le footer.

J'espère que tu pourras à nouveau m'éclairer

Alors si tu regardes ce poste:
http://www.siteduzero.com/forum-83-86089-741273.html#r741273

Tu verras exactement le problème que je soulevais dans le point 1 de mon edit

Lorsque je dis de mettre le corps en float ça veut dire le corps ET le menu. En fait c'est le positionnement avec le margin de 230 qui fait apparaître le bug des 3px sur IE. En fesant floater aussi ton corps, les 3px de bug ne viennet pas s'ajouter.

La propriété clear permet de dire que tu souhaites positionner un élément au-desouss des flottants (alors que, par défaut, un élément va venir se positionner à côté). C'est ce qu'on veut pour ton pied de page; qu'il vienne en bas que ce soit le menu ou le corps le plus long.

Maintenant admettons que dans ton corps tu mettes une image en float avec du texte à côté moins long que la hauteur de l'image. Tu veux ensuite que le texte suivant vienne au-desouss de l'image et non à côté. Tu utiliseras alors la propriété clear, sans quoi ton texte viendrait à la suite de l'autre sur le côté de l'image. Seulement, avec ta solution actuelle, ton clear agir aussi sur ton menu (si ton texte est plus haut que la fin du menu) ce qui peut être plutôt gênant. Avec le corps en float, les éventuels clear se trouvant dans le corps n'agiront pas sur le menu.

J'espère que c'est un peu plus clair, autrement ne t'inquiète pas, avec la pratique tu comprendras petit à petit ces différents fonctionnements

Oooook, je saisis bien mieux à présent !
Un tout tout grand merci pour ces précisions Surtout que le problème avec les imgages, je l'avais en effet déjà rencontré mais jamais solutionné (par contre, ce qui m'arrive encore bien c'est que les images se chevauchent carrément).
Je peux à présent m'attaquer -le coeur léger- au nouveau design de ce truc.


Encore merci =x