[Résolu] Bug d'affichage sous IE

Bonjour,

j'ai actuellement un problème d'affichage sous ie à l'adresse suivante http://rdurandsaintomer.free.fr/SSVP/index.php

Je vous invite à visiter ce même site sous firefox pour visualiser le rendu correct attendu.

En suivant la méthodologie proposé par alsacréations (http://www.alsacreations.com/actu/lire/194-methodologie-pour-resoudre-les-problemes-daffichage-en-css.html) j'ai appliqué differents background-color pour distinguer correctement les éléments ( d'ou l'apparence désagreable du site )et je me suis rendu compte des points suivants :
- En retirant le float: left du menu de gauche (celui en bleu), Firefox se comporte de la même manière que Internet Explorer.

Question donc, comment faire en sorte que IE interprète bien cette propriété pour obtenir le même rendu que sous firefox ?

Merci d'avance pour votre aide
Modifié par Tag (05 Feb 2010 - 21:27)

Le problème est plutôt simple et visuellement on le voit bien.

Tu as du contenu "plus grand" que son conteneur.

Dans ton cas, tu as div#secondaire_droite qui a 182 pixel de large. Dans ce conteneur, tu as div#menu1 ( et les autres aussi ) qui mesure 182 pixel de large mais avec une bordure ( qui rajoute une largeur à ton élément.

Donc tu as un div de 186 pixel de large (182 + 2 pixel de bordure à droite + 2 pixel de bordure à gauche ) dans un conteneur de 182 pixel.

Donc, je ferais des tests sur ton menu à droite en retirant les bordures de tes menus. Tu pourras vérifier rapidement si ma théorie est la bonne et faire les ajustements ensuite. Sinon, tu peux aussi seulement mettre une largeur de 100pixel ( par exemple ) pour voir si le tout se remettra en place avec un contenu plus petit que le conteneur.
Modifié par Sorano (04 Feb 2010 - 14:56)

Ta remarque est juste, je viens de retirer les bordures, malheureusement cela n'affecte pas l'affichage. Le div principal (en jaune) et le div secondaire droite (en rouge) reste placé dessous le div secondaire gauche (en bleu) avec IE alors qu'ils sont correctement alignés sous Firefox.

Finalement, c'est encore plus con que ce que je t'ai dit.

Tu ne fermes pas ton div#corps à la bonne place.

Actuellement, tu as la structure suivantes

<div id="corps">
	<div id="secondaire_gauche"></div>
</div>
<div id="secondaire_droite"></div>
<div id="principal"></div>

Au lieu d'avoir

<div id="corps">
	<div id="secondaire_gauche"></div>
    <div id="secondaire_droite"></div>
    <div id="principal"></div>
</div>

En gros, déplace la balise fermante de div#corps pour que tes autres éléments soient dedans aussi.

Ça va fonctionner.
Modifié par Sorano (04 Feb 2010 - 18:23)

Merci à toi !
En effet c'est mon div#corps qui se ferme trop tôt ( à cause d'un include comportant un </div> oublié ). Le souci est réglé encore une fois merci pour ton aide.