Style conditionnel non pris en compte

Bonjour à toutes et tous,

J'ai un problème assez déroutant. Pour un site Internet, j'ai fait un style qui convient à tous les navigateurs du moment, que j'ai nommé template.css. Ensuite, lors des tests, j'ai remarqué des petits bugs sous IE7 et IE6. J'ai donc mis en place des CSS conditionnels dans mon head :

<link rel="stylesheet" href="./templates/test/css/template.css" type="text/css" />
						
<!--[if IE 7]>
	<link href="./templates/test/css/ie7.css" rel="stylesheet" type="text/css" />
<![endif]-->

<!--[if IE 6]>
	<link href="./templates/test/css/ie6.css" rel="stylesheet" type="text/css" />
<![endif]-->

Lorsque je teste sous IE7, pas de soucis, mes corrections sont bien prises en compte. Sous IE6, rien à faire, on dirait qu'il ne prend pas le CSS. J'ai beau faire des tests grossiers (taille de la police,...), aucun changement sur ma page.

Et pourtant, quand je remplace mon fichier template.css par ie6.css (donc sans passer par des styles conditionnels), là il me donne le bon résultat, car IE6 prend bien en compte le CSS.

Quelqu'un a une idée? Merci d'avance !

P.S. : je fais mes tests sous MultiplesIE, et j'obtiens le même résultat sous IETester.
Modifié par Bobu (12 Mar 2010 - 12:10)

Bonjour,

La syntaxe des commentaires à l'air bonne. Serait-il possible de voir une page en ligne ?

Bonjour, et merci pour cette réponse .

J'ai mis en ligne rapidos un exemple du problème à l'adresse http://blog.bobulum.be/test/ .

Sous Firefox, IE7, IE8, on voit bien le fond (image Hiver.jpg de Windows) avec le texte CONTENT en rouge. Sous IE6, le fond n'apparait pas.

Mon fichier normal.css, compatible FF, IE>6 :

body {
	background-color: White;
	text-align: center;
	margin: 0;
}

#container {
	position: relative;
	width: 800px;
	margin-left: auto;
	margin-right: auto;
	background-image: url("./background.jpg");
	background-repeat: no-repeat;
	min-height: 600px;
}

#content {
	position: absolute;
	top: 280px;
	left: 220px;
	width: 600px;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 20px;	
	text-align: left;
	color: Red;
}

Je pense que le fond n'apparait pas à cause de min-height, qui ne passe pas bien sous IE6. Dans ma page HTML, je met alors :

<link rel="stylesheet" href="./normal.css" type="text/css" />
		
<!--[if IE 6]>
	<link href="./ie6.css" rel="stylesheet" type="text/css" />
<![endif]-->

Et dans ce fichier ie6.css, un petit correctif :

#container {
	min-height:600px;
	height:auto !important;
	height:600px;
}

Dans ce cas là ... aucun changement.

Par contre, si je met tout le CSS compatible avec IE6 dans normal.css, là, ça marche très bien. Or, dans ce design, IE6 est "l'exception", et le reste est la règle... J'aimerais bien avoir un fichier ie6.css, qui serait pris uniquement par IE6, et qui serait un fichier correctif.

Merci d'avance pour votre aide !

Aucun problème de mon côté, le fond apparait bien.

Deux pistes :
- Les version de IE6 standalone ne sont pas toujours au plus proche de la réalité et peuvent interpréter certaines choses différement d'un vrai IE6.
- Il faut vider ton cache.

Merci pour la réponse.

J'ai vidé le cache du navigateur, mais le problème reste. N'ayant pas de IE6 "normal" sous la main, je suis passé par une condition en PHP pour choisir le CSS :

// Browser
$browser = strtolower($_SERVER['HTTP_USER_AGENT']);
	
// CSS
if (!stristr($browser, 'msie 6.0')) {

// CSS normaux

}
else {

// CSS IE6

}

Ça marche ainsi .

Si d'autres ont le même problème, qu'ils n'hésitent pas à donner un feedback (si je suis le seul à ne pas voir le background, on saura d'où vient le problème )

a+

Le problème c'est que cette condition php n'est pas fiable du tout (il est posible de faire passer un navigateur pour un autre avec HTTP_User_Agent).

Les commentaires fonctionnaient très bien.

Pour tester avec un "vrai" IE6, le mieux reste d'installer une machine virtuelle (comme virtual PC) et une image de windows XP + IE6 (trouvable sur le site de Microsoft).