IE6 et site en colonnes pb

Bonjour,

Tout d'abord, je me présente. Je m'appelle Mohamed. J'ai fait quelque site web. Et je dois dire que je retrouve depuis quelques jours l'envie d'en refaire, ou d'améliorer les sites existants.

Mon problème numéro 1 pour l'instant concerne les sites avec 3 colonnes en CSS. J’ai d’ailleurs regardé sur le tutorial de alsacréations pour faire les sites.

Je regarde mes sites avec ff3.0 ie7.0 et ie6.0 (avec Multi Ies) Sinon il y a des bon site qui génèrent des vignettes de votre site sous différent navigateur ( www.browsershots.org )

Le site www.bdzoom.com utilise le CSS avec 3 colonnes. Pas de soucis sous IE6, j’ai mes 3 colonnes qui s’affichent correctement :
- menu orange à droite
- contenu au centre
- et zoom sur a droite

Voici le screenshot valable pour les 3 navigateurs cité puisque no problème.


Voici les principales class et id CSS
http://kadik2i.com/bdzoom.png

#conteneur { width: 960px;
	margin-top:12px;
	border-top:3px solid #0b0b62;
	 }

#navigation {
	float: left;
	width: 180px;
	margin-right: 10px;
}

#cartouche {
	float: right;
	width: 200px;
	margin-left: 10px;
	}

#contenu {
	background:#fff;
	width: 550px;
	overflow: hidden;
}

Et voici le code pour IE6

<!--[if lte IE 6]><style type="text/css">
#navigation {
	margin-right: 7px;
}
#cartouche {
	margin-left: 7px;
}	
#contenu {
	overflow: visible;
	height: 1%;
}
</style><![endif]-->

Jusqu'ici tout va bien !!

Par contre ici j'ai un problème. un site 3 colonnes CSS. je ne comprend pas depuis 3 jours j'ai pas encore réglé le soucis.

#preamblea{
float:left;
width:240px;
text-align:justify;
font-size:8pt;
margin-right:10px;
}

#preamblec{
background:url(service-the.jpg) bottom no-repeat;
float:right;
width:365px;
font-size:8pt; 
}

#preambleb{
width:335px;
overflow:hidden;
}

<!--[if lte IE 6]><style type="text/css">
#preamblea {
	margin-right: 7px;
}
#preamblec {
	margin-left: 7px;
}	
#preambleb{
	overflow: visible;
	height: 1%;
}
</style><![endif]-->

le site est : http://livraison-sandwichs-93.com/index.php
La sur Firefox et IE7 j'ai mes 3 colonnes, comme voici:
http://kadik2i.com/ie7sabdwichs.png

Parcontre sous IE6 probleme d'affichage, la colonne d'images sandwichs boissons et desserts est decalé vers le bas. Bizarre!

http://kadik2i.com/ie6sabdwichs.png

A votre avis c'est quoi le problème ?
Modifié par meak (03 May 2009 - 06:12)

Salut Mohamed,

J'ai pas inspecté à fond, mais déjà au premier abord, y'a quelque chose qui cloche :

<div id="preamblea"> float:left </div>
<div id="preamblec"> float:right </div>
<div id="preambleb"> float:none </div>

Y a-t-il une raison valable pour ne pas mettre tes <div> dans l'ordre (a, b, c) et les positionner toutes en float:left ?

Merci Marcv,

Au début ça ne fonctionnait pas, à cause du style des balises H3 utilisé dans preamblea et preamblec,

width:300px;
height:50px;
background:url(s24_5.gif) no-repeat;
padding-left:110px;
font-size:15pt;
margin-left:10px;
text-indent:-9999px;

je pense que le padding-left :110px; faisait décalé la seconde colonne qui était en float:none

240+365+335+110+110 = 1160 ; alors que mon conteneur est de 980

j'ai chang les style H3 par :

font-size:15pt;
margin-left:10px;

Après j'ai en effet utilisé ta méthode, 3 div en float left, avec div a + b + c dans l'ordre. TOUT FONCTIONNE BIEN SOUS IE6

MERCI
Modifié par meak (04 May 2009 - 14:36)