Mes blocs se placent n'importe comment sous IE ! Au secours

Voila, je réalise en ce moment un site associatif.
Comme d'habitude, je vérifie avec FF mais au horreur, quand à la fin je vois le résultat avec IE !
Jugez en par vous même!

http://www.redemption.fr/_maquette

Mes problèmes sont donc:

-les liens du menu qui se mettent les uns sous les autres au lieux de s'aligner.
- les blocs de droites qui filent vers le milieu de la page.

J'ai réellement besoin de votre aide, c'est important ! Merci d'avance à tous !

voici le css:

body {
	background-color:#666666;
	color:#000000;
	font-size:12px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	}
	
h1 {
	font-size:18px;
	}
	
.page {
	position:relative;
	background-image:url(img/corps.jpg);
	background-repeat:repeat-y;
	width:832px;
	height:auto;
	margin-left:auto;
	margin-right:auto;
	margin-top:-10px;
	padding:0px;
	}

.top {
	position:relative;
	background-image:url(img/top.jpg);
	background-repeat:no-repeat;
	width:832px;
	height:257px;
	padding:0px;
	}
	
.pied {
	position:relative;
	background-image:url(img/foot.jpg);
	font-size:10px;
	width:832px;
	height:50px;
	margin-top:auto;
	bottom:0;
	}
	
.pied2 {
	position:relative;
	height:9px;
	width:150px;
	font-size:8px;
	margin-top:auto;
	margin-left:auto;
	margin-right:auto;
	bottom:0;
	text-align:center;
	padding:0px;
	}
	
.pied2 a {
	text-decoration:none;
	color:#000000;
	}
	
	
.gauche {
	position:relative;
	background-image:url(img/gauche.jpg);
	width:151px;
	height:493px;
	margin-left:16px;
	margin-top:0px;
	}
	
.ligne {
	position:relative;
	width:auto;
	height:300px;
	margin-left:32px;
	}
	
.casegauche {
	position:relative;
	width:auto;
	height:auto;
	float:left;
	margin-left:60px;
	}
	
.casedroite{
	position:relative;
	width:300px;
	height:300px;
	float:left;
	margin-left:100px;
	}
	
.imagenews {
	position:relative;
	height:auto;
	width:auto;
	float:left;
	padding:0px;
	}
	
.infonews {
	position:relative;
	height:auto;
	width:150px;
	float:left;
	margin-left:10px;
	}
	
ul#menutop{
	position:absolute;
	width:auto;
	height:40px;
	margin-left:320px;
	margin-top:140px;
	margin-bottom:auto;
	padding:0px;
	list-style-type:none;
	}
	
#menutop a {
	color:#FFFFFF;
	font-size:20px;
	text-decoration:none;
	margin-right:20px;
	display:block;
	height:23px;
	}

#menutop li {
	float:left;
	display:inline;
	}
	
ul#menupied{
	position:absolute;
	width:auto;
	height:auto;
	margin-left:20px;
	margin-top:5px;
	margin-bottom:auto;
	padding:0px;
	list-style-type:none;
	}
	
#menupied a {
	color:#000000;
	font-size:10px;
	text-decoration:none;
	margin-left:5px;
	margin-right:5px;
	}
	
#menupied a:hover {
	text-decoration:underline;
	}
	
#menupied li {
	display:inline;
	}

ul#menugauche{
	position:absolute;
	width:auto;
	height:auto;
	margin-left:30px;
	margin-top:0px;
	margin-bottom:auto;
	padding:0px;
	list-style-image:url(img/puce.gif);
	}
	
#menugauche a {
	color:#339933;
	font-size:12px;
	font-weight:550;
	text-decoration:none;
	}
	
#menugauche a:hover {
	text-decoration:underline;
	}
	
#menugauche li  {
	margin-top:10px;
	}
		
.droite {
	margin-left:auto;
	margin-right:0px;	
}

.menu {
	background-color:#FFFFFF;
	color:#000;
	margin:0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	width:50px;
	height:50px;
}

.pti {
	position:relative;
	width:400px;
	height:250px;
	}

Modifié par thomas52 (21 Nov 2006 - 22:55)

bonjour

c'est le melange de display:block sur a et de float sur li qui te provoque ce probleme dans IE.

simplifie les regles css comme ceci par exemple)

#menutop a {
	color:#FFFFFF;
	font-size:20px;
	text-decoration:none;
	margin-right:20px;
	}

#menutop li {
	display:inline;
	}

Cela devrait mieux passer dans IE (pas retester).

Pour mettre une liste en horizontale , il ya :

li {float:left; /* ou right */}

ou

 li {display:inline;}

lorsque tu fais inline + float , il y a double emploi. Sauf lorsque tu fais face a un probleme de marge doublée dans IE sur un element flottant.

li {
float:left; /* ou right */
margin: 0 1em;
display:inline;/* eliminera le bug de  double marge laterale dans IE */
}

Mais le float associer a un inline (qui buguerait ? ), n'a aucune raison d'etre a mon avis .

Dans ton cas le inline semble suffire et eviteras les debordement de flottants.

GC

Merci beaucoup GC ! ca m'enleve une épine du pied, mais reste la plus grosse, le placement des blocs.

D'un coté, je me dis que ma methode n'est peut etre pas la meilleure, j'aurais peut etre du diviser la page en deux colonne puis seulement apres faire des cases dans chacunes d'elles, au lieu de creer d'abord des lignes.
Quand dites vous ?

bonsoir,

:) , je n'avais pas ouvert la page avec IE, heu,

alors , une fois de plus on voit le bug des marges doublées dans IE sur les flottants qui s'eliminent avec un display:inline; .

Pour le deuxieme flottant , la marge de gauche de 100px ne sert a rien , sauf a faire bugger IE.

.casegauche {
	position:relative;/*necessaire ? */
	width:auto;/* est ce vraiment necessaire ?  */
	height:auto;/* est ce vraiment necessaire ?  */
	float:left;
	margin-left:60px;
	display:inline;/* correction bug IE */
	}
	
.casedroite{
	position:relative;/*necessaire ? */
	width:300px;
	height:300px;
	float:left;
	/* margin-left:100px; a enlever */
	}

pour le choix de "fausses colonnes " ou non , je ne peut pas repondre .
Cela depend des contenus a afficher , il faut d'abord privilegié le flux du html , et voir ensuite si en calant ça sur 2 colonnes ça reste encore coherents a la lecture/affichage.

Si il s'agit de morceler des contenus et de les disseminés dans le code html , pour afficher 2 "colonnes " , c'est une mauvaise idée.

Seul un tableau peut alors rester coherent si il est justifier par le contenu.

++

Merci beaucoup GC ! Ca fonctionne très bien maintenant, par contre je n'ai pas tout a fait compris cette histoire d'annulation des float, pourrais tu me faire un bref explicatif que je ne refasse plus la même erreur ?

salut,

heu non , ce n'est pas les "float" qui sont eliminé .

Dans IE , lorsque tu met un float a gauche avec une marge gauche de 10px par exemple , IE la double et la passe a 20px ! .

En appliquant float et display:inline ensemble la marge se trouvant du coté du flottement (droite ou gauche) ne se verra plus multiplié par 2 dans IE.

Pour les autres navigateurs le display:inlinen'a aucun effets sur les elements flottant s , qui conservent toutes les caracteristique d'un elements flottant.

++

Nikel, merci pour l'explication, c'est comme ça qu'on avance.

Puis je abuser de ton aide encore un peu?

Alors dans la partie "wears" j'ai un soucis étrange, et cette fois ce doit venir de ma méthode donc c'est important pour moi de regler cette erreur.

Le bloc "lignwears" ne veut pas glisser en haut malgré le float right, il reste bloqué en bas... Merci de m'expliquer !

Et encore merci pour tout monsieur!

heu , peut-etre un peu ,

mais le forum n'est pas la pour des cours particuliers n0n plus .

Pour le lignwears en bas , et bien il vient s'afficher aprés ton block a gauche , comportement normal de 2 block , il s'affiche l'un aprés l'autre en effectuant un retour al la ligne avant et aprés eux .

Pour faire remonter le second , il est possible de placer le premier en float par exemple.

.gauche {
	float:left;
display:inline;/* bug IE */
position:relative;
	background-image:url(img/gauche.jpg);
	width:151px;
	height:493px;
	margin-left:16px;
	margin-top:0px;
	}
	

Ensuite le second block remonte en passant dessous et en decalant son contenu .

Il manque maintenant un overflow:hidden; par exemple a #page , pour qu'il englobe les flottants.

.page {
	position:relative;
	background-image:url(img/corps.jpg);
	background-repeat:repeat-y;
	width:832px;
	height:auto;
	margin-left:auto;
	margin-right:auto;
	margin-top:-10px;
	padding:0px;
overflow:hidden;
	}

puis pour replacer le pied par exemplee :

.pied {
position:absolute;
	background-image:url(img/foot.jpg);
	font-size:10px;
	width:832px;
	height:50px;
	margin-top:auto;
	bottom:0;
	}

C'est propositions ne sont probablement pas les solutions les plus avantageuses.

Pour le css , je te conseille de faire des essai de mise en forme en usant de quelque balises et de lorem ipsum , en ne testant que quelques propriétés css a la fois mais en cherchant a comprendre leur utilités et leur comportement d'un navigateur a l'autre

Pour ces test les faire dans une page avec un doctype valide et une autre sans doctype , histoire de repéré les defauts ou difference de comportement de IE (et des autres) en mode quirk ou non standard.

Chemin faisant tu auras plus de recul pour apprehender la mise en forme d'un document et il te seras alors plus facile d'elaborer une architecture de base .

++


p.s. Il est agreable de voir du code proprement indenté/presenté pour demander de l'aide .

Merci ! Désolé pour les cours particuliers mais la au moins beaucoup des erreurs que je faisait auparavant vont disparaitre, merci encore !

Euh par contre j'ai pas tout compris pour le P.S ...

bah , ton css est clair a lire , et le html aussi , j'apprecie quoi ++

Ouf j'ai crut que c'était ironique

Cette fois c'est le dernier mot de ce topic tu m'as assez aidé.

A bientot pour un autre topic...