28173 sujets

CSS et mise en forme, CSS3

Feuille CSS non prise en compte quand le doctype est OK

Bonjour à tous.
J'ai le pb suivant: sur deux serveurs distincts j'ai deux rendus totalement différents.
-apache me sert correctement mes pages et css, et le rendu est conforme à ce que j'attends.
-IIS par contre me sert tout ce qu'il faut comme il faut, mais la CSS n'est effective QUE si le doctype n'est pas correct. Je n'arrive pas à avoir un site qui soit Valide XHTML 1.0, et avec un rendu conforme (notez que la css est bien servie en tant que css, et que j'ai bien accès au code source sur le navigateur...). Donc c'est juste le rendu qui foire...
Quelqu'un peut-il m'aider SVP?
Merci d'avance.
Modifié par chu (04 Apr 2007 - 14:31)
Salut,

Une page en ligne, ou au moins l'intégralité de ton code pour pouvoir éventuellement te renseigner ? En l'état j'ai peur que personne ne puisse le faire. Smiley cligne
Bonjour,
ton problème pourrait venir d'une erreur syntaxique au niveau de ton link ou
@import css car le mode quirks (absence de doctype ou doctype incorrect ou
incomplet) est justement plus permissif à ce niveau là.
Tu pourrais donner un lien ou le code correspondant?
Modifié par Hermann (04 Apr 2007 - 15:03)
argh, désolé...
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
	<title>toto</title>
	<meta http-equiv="Content-type" content="text/html;charset=iso-8859-15" />
	<meta name="description" content="toto" />
	<meta name="keywords" content="toto" />
	<meta name="language" content="fr" />
	<meta http-equiv="Content-Style-Type" content="text/css" />
<style type="text/css" media="screen" title="toto">@import "css/test.css";</style>
<link rel="stylesheet" type="text/css" media="print" href="css/print.css" />
	<script type="text/javascript" src="js/parametrages.js"></script>
	<script type="text/javascript" src="js/parametrages_ajax.js"></script>
	<script type="text/javascript" src="js/dates.js"></script>
</head>
<body>
	<div id="header">
		<img src="./images/logonew.jpg" alt="toto" />
		<div id="titre"><span>toto</span></div>
	</div>
	
	<div id="foot"><span>©&nbsp;moi&nbsp;2007</span></div>	
	
	<div id="gauche">

	<ul class='menu'>
		<li><a href="index.php?menu=1">toto1</a></li>
        <li><a href="index.php?menu=2">toto2</a></li>
        <li><a href="index.php?menu=3">toto3</a></li>

  </ul>
  </div>
</body>
</html>


CSS:

html {
	height:100%; 
	max-height:100%; 
	padding:0;
	margin:0; 
	border:0; 
	background-color: #A9C1DD;
	font-family:Tahoma, Verdana, Arial, Helvetica, sans-serif;
	font-size: 0.8em;
	/* hide overflow:hidden from IE5/Mac */ 
	/* \*/ 
	overflow: hidden; 
	/* */ 
}

body {
	height:100%; 
	max-height:100%; 
	overflow:hidden; 
	padding:0; 
	margin:0; 
	border:0;
}

#frame {
	overflow:auto; 
	position:absolute; 
	z-index:3; 
	top:158px; 
	bottom:25px; 
	left:200px; 
	padding : 10px;
	right:0; 
	background-image: url(../images/coin.gif); 
	background-repeat : no-repeat;				
	background-color:#F5F5F5;	
}


* html #frame {
	top:0; 
	left:0; 
	right:0; 
	bottom:0; 
	height:100%; 
	max-height:100%; 
	width:100%; 
	overflow:auto; 
	position:absolute;
	z-index:3; 
	border-top:158px solid #fff;
	border-bottom:25px solid #fff;
	border-left:200px solid #fff;
}

#header {
	position:absolute; 
	margin:0; 
	top:0; 
	left:0; 
	display:block; 
	width:100%; 
	height: 158px;
	background-image: url(../images/fondban.jpg); 
	background-repeat : repeat-x;
	background-color: #3077A3;
	background-position:0 0; 
	z-index:5; 
	overflow:hidden; 
	color:#fff;
}

#foot {
	position:absolute; 
	margin:0; 
	bottom:0; 
	left:0; 
	display:block; 
	width:100%; 
	height:25px; 
	margin-top : 3px;
	text-align:right;
	font-size:1em; 
	z-index:5; 
	overflow:hidden; 
	background-color:#83ACC8;
	color:#fff;
}

#gauche {
	position:absolute; 
	left:0; 
	top:158px; 
	bottom:25px; 
	width:200px; 
	background-color:#83ACC8;
	z-index:4; 
	overflow:auto; 
	background-repeat:no-repeat;
}

* html #gauche {
	height:100%; 
	top:0; 
	bottom:0; 
	border-top:158px solid #fff; 
	border-bottom:25px solid #fff; 		
}
/* titre dans le header */
/* -------------------- */
div#titre {
			position : absolute;
			float : left;
	   	top:65px;
			left:35%;
			color: white;
			font-family: Verdana, Arial, Helvetica, sans-serif;
			font-size: 2em
	}
div#titre span{
padding-left:1.8em;
background:url(../images/logo_cal.png) transparent left no-repeat;
	}

/* menu de gauche */
/* -------------- */

#gauche ul {
		margin: 0;
		padding: 0;
		list-style-type: none;  /* supprime le type de la liste */
}

#gauche ul li {
		background-image: url(../images/fleche.gif);
		background-repeat: no-repeat;
		padding-left: .8em;                /* pour le positionnement */
		background-position: 0 .4em;       /* pour le positionnement */
		margin: 0.5em;
		font-size : 1.2em;     
}	

#gauche ul li a  {color:#F3F3E1; text-decoration: none; }
#gauche ul li a:hover {color: black; text-decoration:none;}

div#foot span
{
	margin-right:1em;
}
Penses à valider ta css sur http://jigsaw.w3.org/css-validator/
ça pourrait peut-être venir de là sinon je ne vois pas.
Aucune erreur de syntaxe mais n'oublies pas les comentaires:
<style type="text/css" media="screen" title="toto">/*<![CDATA[*/ 
@import "css/test.css"; /*]]>*/</style>

Modifié par Hermann (04 Apr 2007 - 16:47)
Bon, ben je vais la laisser en quirks alors.
Merci à vous d'avoir pris le temps de me répondre.
A+
Tester avec un link au lieu du style, à tout hasard. Et vérifier le type MIME envoyé avec la feuille de style. Et que le lien est valide. Smiley cligne
Sujet clos
Aller à