28172 sujets

CSS et mise en forme, CSS3

Bonjour à tous,

Toujours dans la création de mon site web, je suis confronté à un nouveau problème que je n'arrive pas à remédier.

Sous IE :

[Modération : image trop grande]http://img42.imageshack.us/img42/3748/ienimp.jpg

SOUS FF (Parfait) :

[Modération : image trop grande]http://img651.imageshack.us/img651/371/ffffaa.jpg

Le problème :

Le gros décalage du corps de la page suite à l'intégration d'un script de galerie (iGalerie), sous firefox tout se met bien tranquillement et sous IE j'ai l'impression que le template du script de galerie m'écrase les margin auto ou quelque chose dans le genre vu que plus rien n'est centré. La page "Accueil est nikel sous IE mais quand je passe à la partie "Copies" là ca change tout et le CSS de chaque page est le même pour IE. J'ai essayé de modif quelques trucs sur le template de ma page mais ça n'a rien fait ce qui veut dire que ca vient bien du template de la galerie.

Voilà le site en question pour que vous puissiez mieux voir :

Copies de Zéros

Auriez vous un moyen d'identifier le problème ? Je ne vous mets pas le code du template de la galire car il fait plus de 1500lignes donc je vous l'epargne mais si vous en avez besoin ou seulement une partie pour résoudre mon problème je vous le passe de suite !

Je vous mets quand même le template de ma page sous IE :


body{
	background:url(img/fond.jpg);
	margin:0 auto;
	}
	
#header{
	height:133px;
	background:url(img/header.jpg) no-repeat top center #000000;
	margin:0 0 0 0;
}

#fond{
	height:39px;
	background:url(img/menu-fond.png) repeat-x top center;
	margin:0px 0 -1px 0;
}

#conteneur{
	padding:0;
	margin:0px auto;
	width:1104px;
	height:29px;
}

#menu ul li{
	list-style:none;
	float:left;
	padding:0;
}

#menu ul li a{
	height:29px;
	text-decoration:none;
	text-align:center;
	display:block;
	background:no-repeat bottom left;
	padding:0;
	
}

#menu ul li a.gauche{
	width:129px;
	background:url(img/menu-gauche.jpg);
}

#menu ul li a.accueil{
	width:120px;
	background:url(img/menu-accueil.jpg);
}

#menu ul li a:hover.accueil{
	width:120px;
	background:url(img/menu-accueil-over.png);
}

#menu ul li a.copies{
	width:139px;
	background:url(img/menu-copies.jpg);
}

#menu ul li a:hover.copies{
	width:139px;
	background:url(img/menu-copies-over.png);
}

#menu ul li a.top10{
	width:103px;
	background:url(img/menu-top10.jpg);
}

#menu ul li a:hover.top10{
	width:103px;
	background:url(img/menu-top10-over.png);
}

#menu ul li a.forum{
	width:106px;
	background:url(img/menu-forum.jpg);
}

#menu ul li a:hover.forum{
	width:106px;
	background:url(img/menu-forum-over.png);
}

#menu ul li a.inscription{
	width:152px;
	background:url(img/menu-inscription.png);
}

#menu ul li a:hover.inscription{
	width:152px;
	background:url(img/menu-inscription-over.png);
}

#menu ul li a.connexion{
	width:147px;
	background:url(img/menu-connexion.jpg);
}

#menu ul li a:hover.connexion{
	width:147px;
	background:url(img/menu-connexion-over.png);
}

#menu ul li a.droite{
	width:128px;
	background:url(img/menu-droite.jpg);
}



#contenu{
	width:849px;
	height:69px;
	background:url(img/body-haut.png) no-repeat top center;
	margin:0 auto;
}


#contenu ul li{
	width:150px;
	list-style:none;
	float:right;
	margin:15px 60px 0 0;
}

#contenu ul li a{
	height:17px;
	text-decoration:none;
	text-align:right;
	display:block;
	background:url(img/facebook.png) no-repeat top right;
}

#centre{

	width:731px;
	background:url(img/body-centre.png) repeat-y left;
	margin:0 auto;
	padding:0 58px;
}

div#colonne1 { 
    float: left; 
    width: 100x; 
	margin-right: 10px;
	margin-left: 8px;
}

div#colonne2 { 
    float: right; 
    width: 300px;  
}

div#centre2 { 
	height:263px;
    background:url(img/post-it-top10.png) no-repeat;
	margin: 0 0 0 150px;
}

#news{

width:574px;
margin:0 0 0 157px;

}

#bas{
	width:847px;
	height:42px;
	background:url(img/body-bas.png) no-repeat top center;
	margin:-16px auto;
}

#copy{
	width:194px;
	height:14px;
	background:url(img/copyright.png) no-repeat top center;
	margin:0 auto;
}


Merci d'avance pour votre aide !
Modifié par Poulaka (05 Jul 2010 - 10:31)
Salut,

IE bascule en mode Quirks lorsqu'un commentaire précède le doctype ; autrement dit, il se comporte comme IE 5.5, qui ne reconnaît pas les marges automatiques et applique un modèle de boîte différent de celui du W3C (en calculant autrement les largeurs et hauteurs des blocs lorsqu'ils ont une bordure ou des marges internes). Par conséquent, supprime le commentaire <!-- GALERIE MODE INTEGRATED --> et tout rentrera dans l'ordre.
Modifié par Victor BRITO (05 Jul 2010 - 09:46)
Alors là chapeau merci beaucoup !

Je commençais à me faire du soucis et à revoir mon template tout entier alors qui fallait simplement que je supprime une ligne de code !

Merci beaucoup Victor !