28173 sujets

CSS et mise en forme, CSS3

Internet explorer me casse tout

Bonswar Smiley smile

J'ai commencé la mise en page avec les blocs ce matin mais je rencontre un probleme de compatibilité entre deux navigateurs Smiley decu
Ca c'est mon site

avec firefox c'est niquel chez moi, tout se met comme je veux, par contre, si je le lance avec internet explorer Smiley eek c'est la cata! Le menu de gauche ne s'affiche pas, tout est deformé etc...

Quelqu'un saurait me dire pourquoi ? Je mettrais bien mes sources mais ca risque d'etre gros :s

merci d'avance Smiley smile
Modifié par Palleas (26 Feb 2006 - 00:01)
Plop,

Bienvenue dans les voies impénétrables du saint CSS.

Cependant tu as du louper quelques épisodes lors de tes premières excursions dans ce royaume.

Je t'encourage à repasser par cette étape histoire de partir sur de bonnes bases : )
J'ai bien lu les tutos et sur Firefox j'arrive à un resultat potable mais avec interet explorer toujours pas :'(

Voir ici

voici ma feuille de script :

body {
background-color:#EEEEEE;
}
#conteneur {
width:750px;
height:auto;
background-color:#FFFFFF;
border-top:1px solid #CCCCCC;
border-bottom:1px solid #CCCCCC;
border-right:1px solid #CCCCCC;
border-left:1px solid #CCCCCC;
margin-top:20px;
margin-left:auto;
margin-right:auto;
margin-bottom:20px;
overflow:auto;
}
#header {
width:750px;
height:200px;
background-image:url('../images/design/header.jpg');
background-repeat:no-repeat;
}
#menu {
width:200px;
height:auto;
margin-top:20px;
margin-left:20px;
float:left;
}
#page {
position:relative;
background-color:#FFFFFF;
width:510px;
margin-top:40px;
margin-left:230px;
margin-right:15px;
margin-bottom:15px;
}
#smenu1_top {
width:200px;
height:61px;
margin:0px;
}
#smenu1_middle {
width:200px;
height:auto;
margin:0px;
background-image:url('../images/design/menu_middle.jpg');
}
#smenu1_bottom {
width:200px;
height:38px;
margin:0px;
}
#smenu2_top {
width:200px;
height:80px;
margin-top:10px;
}
#smenu2_middle {
width:200px;
height:auto;
margin:0px;
padding-left:15px;
background-image:url('../images/design/menu_middle2.jpg');
background-repeat:repeat-y;
}
#bottom {
width:200px;
margin-left:auto;
margin-right:auto;
margin-top:10px;
}


pour telle page :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Believe in tomorow, encyclopedie sur l'univers de Hunter X Hunter</title>
<!-- Listes des feuilles de styles -->
<link rel="stylesheet" media="screen" href="gabarits/styles/blocs.css" />
<link rel="stylesheet" media="screen" href="gabarits/styles/styles.css" />
<link rel="stylesheet" media="screen" href="gabarits/styles/liens.css" />
<!-- Fin des feuilles de styles -->
<!-- Scripts Javascripts -->
<!-- Fin des scripts Javascripts -->
<!-- Balises META -->
<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1" />
<meta http-equiv="Content-Language" content="fr" />
<!-- Fin des balises -->
</head>
<body>
<div id="conteneur">
	<div id="header"></div>
	<div id="menu">
		<div id="smenu1_top"><img src="gabarits/images/design/menu_top.jpg" alt="top_menu1" /></div>
		<div id="smenu1_middle">
			<ul class="liste_menu">
			<li><a href="#" class="menu" title="Retour à l'accueil !">Accueil</a></li>
			<li><a href="index.php?page=dictionnaire" class="menu" title="Dictionnaire regroupant des definitions de tout ce qui constitue l'univers de HXH">Dictionnaire</a></li>
			<li><a href="#" class="menu" title="Présentation des personnages">Les personnages</a></li>
			<li><a href="#" class="menu" title="Présentation des différents lieux">Les lieux</a></li>
			<li><a href="#" class="menu" title="Présentation des organisations">Les organisations</a></li>
			<li><a href="#" class="menu" title="Divers dossiers">Les dossiers</a></li>
			<li><a href="#" class="menu" title="Acceder au forum">Forum</a></li>
			<li><a href="#" class="menu" title="Quelques liens...">Liens</a></li>
			<li><a href="#" class="menu" title="Contacter les webmasters">Contact</a></li>
			</ul>
		</div>
		<div id="smenu1_bottom"><img src="gabarits/images/design/menu_bottom.jpg" alt="Bottom_menu1" /></div>
		<div id="smenu2_top"><img src="gabarits/images/design/menu_top2.jpg" alt="top_menu2" /></div>
		<div id="smenu2_middle">
		<!-- Inclusion de la partie log-in -->
		{LOG}
		<!-- Fin de l'inclusion -->
		</div>
		<div id="smenu2_bottom"><img src="gabarits/images/design/menu_bottom2.jpg" alt="Bottom_menu2" /></div>
	</div>
	<div id="page">
	<!-- Inclusion de la page avec les templates -->
	{PAGE}
	<!-- Fin de l'inclusion -->
	</div>
	<div style="clear:both;"></div>
</div>
<div id="bottom">
	<p><a class="right" href="http://jigsaw.w3.org/css-validator/"> <img src="http://jigsaw.w3.org/css-validator/images/vcss" alt="Valid CSS!" height="31" width="88" /></a>
	<a href="http://validator.w3.org/check?uri=referer"><img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Transitional" height="31" width="88" /></a></p>
</div>
</body>
</html>


qu'est ce qu'il faut que je fasse ? Smiley decu
Sujet clos
Aller à