[Résolu] Problème d'affichage blocks IE7

Bonjour à tous,

Je me permets de poster ici après de nombreuses recherches un peu partout sur Internet mais chaque problème est assez spécifique et je n'ai pas trouvé de solution pour le mien.

Alors voila je m'occupe de sites d'e-commerce et je rencontre un problème d'affichage sur l'un d'entre eux sous IE7 (pas testé IE6 mais je pense que ça doit être à peu de choses près la même chose).

Le site est en ligne et consultable à l'adresse suivante : http://www.paraprice.fr .

Le corps de la page (sous le menu du haut) est divisé en 3 colonnes, le menu de gauche est en float left avec taille fixe, le block central est en float left également avec taille fixe et le menu de droite est en float right avec taille fixe.

Sous IE7 le block du milieu se colle à gauche et le menu de gauche s'affiche en dessous, toujours à gauche tandis que sous IE9, Firefox et Chrome aucun soucis d'affichage.

J'ai essayé pas mal de choses dans le CSS (ce site est sous joomla avec template) notamment changer les width, les float et d'autres choses trouvées sur le net mais rien n'y fait IE7 n'en fait qu'à sa tête.

La width total du conteneur parait correcte et permet bien d'afficher les 3 blocs un à coté de l'autre.

Je précise que modifier le CSS est quelque peu difficile parfois puisqu'il s'agit d'un CSS de template toute faite, il y a donc plusieurs CSS, certaines règles prennent la priorité sur d'autres etc.

Je me sers essentiellement des consoles développeurs chrome et IE et du mode de compatibilité d'IE pour identifier les éventuels problèmes avant d'aller modifier le CSS.

Auriez-vous une piste à me proposer ?

Merci d'avance, je vais suivre ce topic avec attention et je suis disponible pour répondre à vos questions ou essayer des trucs.
Je posterai également si j'arrive à trouver tout seul comme un grand

Il manque une taille à ton conteneur de droite, je pense que cela peut se résoudre avec quelque chose comme ça :

.left div#main {
    float: right;
    margin: 0;
    width: 730px;
}

J'ai regardé vite fait, je te laisse essayé pour vérifier, mais je pense que c'est la bonne direction

A+, SM

Bonjour,

je n'ai fait que survoler ta page mais un truc m'a sauté aux yeux : ta div id=left est un niveau au-dessus des deux autres : ce qui a pour conséquence que ta div id=main se ferme ( avec ton middle qui se cale à gauche, logique ) et ta div left qui se cale à gauche après ta div main. Ta div main étant prenant toute la place ( float:left = display:block ), ta div left passe en-dessous.

Tu devrais peut-être mettre tes trois blocs au même niveau, ou alors plus simplement tu peux placer ta div left avant ta div main.


Bon courage en tout cas !
Modifié par Ten (25 Jul 2012 - 10:10)

@SM : Il y a une taille pour les div left et div right :

div#right {
	width: 180px;  
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	float: right;
}

div#left {
	width: 200px;  
	margin: 0px 10px 0px 0px;
	float: left;
	 
}

div#content {
	width: 540px;	 
	float: left;
}

Par contre pour les div content et right sont incluses dans div middle qui a width: auto;

@Ten : Chez moi les div left et middle sont au même niveau :

http://img684.imageshack.us/img684/876/tmpcss.png

Tes div content et right sont 3 niveaux en-dessous de left !

À mon avis, si tu mets left avant main, ça devrait mieux passer. Et comme te l'a dit SuperMerguez, la div id=main n'a pas de largeur fixe, et c'est elle qui est importante puisqu'au même niveau que left.

En fait SM (et Ten) tu es un dieu

En mettant width : 730px (valeur indiquée par la console de chrome <3) tout se place correctement sous IE7 et pas de changements sous chrome et firefox !

C'était tellement simple au final. J'étais perdu dans mes divs et j'ai zapé que la div main était celle qui était au même niveau que left !

Merci beaucoup en tout cas.

Si cela t'est possible, tu devrais vraiment nettoyer ce code - ce site souffre de divite aïgue et c'est ça qui t'a gêné.

Bonne continuation en tout cas, ravi d'avoir participé

Un peu compliqué sachant que je m'occupe de ce site pour une durée fixe et que c'est un template tout fait qui peut/pourra éventuellement être changé/upgradé par d'autres personnes.

Néanmoins j'ai été surpris de ne constater qu'une erreur au w3c css validator