IE ne lit pas mon commentaire conditionnel

Bonjour à tous,
Je viens souvent sur votre forum, mais c'est la première fois que je pose une question. J'ai fouillé partout, mais je n'ai pas trouvé de réponse à mon problème. ça a l'air pourtant tellement simple !! Je vous explique :
J'ai un problème de reconnaissance de CSS sous IE. J'ai donc fait un commentaire conditionnel avec une feuille de style spécial IE, mais IE ne me le prend pas en compte. J'ai bien suivi l'astuce de Raphael ici : http://www.alsacreations.com/astuce/lire/48-quest-ce-que-les-commentaires-conditionnels.html

Mais rien à faire...

Voici mon code XHTML que j'ai placé dans HEAD

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

[code=][/code]
Et mon ie.css :

#sousmenu
{
left: 100px;
}[code=][/code]

J'ai juste remplacé l'élèment que je voulais modifier sous IE, c'est bien ça non ?

Pour voir la différence entre firefox et IE, vous pouvez aller voir sur mon site ici :
http://www.elodiecavel.com/aurelia_livre.php
(c'est un problème de colonne qui est complétement décalée)

Merci d'avance pour votre aide !

IE considère bien ton commentaire conditionnel et inclus la feuille de style. Je crois que le problème vient du fait que ton sélecteur n'est pas assez "précis". Quand deux sélecteurs sont à niveau égal, c'est le dernier qui est pris en considération.

Par exemple dans ce cas-ci, ça fonctionnerait probablement puisque le premier #sousmenu serait "écrasé" par le deuxième.

#sousmenu
{
left: 150px;
}
/*IE*/
#sousmenu
{
left: 100px;
}

Cependant, c'est emmerdant devoir changer l'ordre du code alors tu peux préciser et spécifier le sélecteur. Plus un sélecteur est précis, plus il a d'importance. Par exemple

/* IE */
ul#menu li ul#sousmenu
{
left: 130px;
}

#sousmenu
{
left: 100px;
}

Ainsi, même si le sélecteur IE est avant dans le code, il aura priorité étant donné sa meilleure définition.

Donc ton ie.css deviendrait

@charset "UTF-8";
/* CSS Document */

ul#menu li ul#sousmenu
{
left: 100px;
}

Ça devrait fonctionner !

Bonsoir,

C'est parce que ton commentaire conditionnel qui mène à ta feuille adaptée pour IE est placé avant les autres feuilles de styles… Met le après et tout fonctionnera comme sur des roulettes.

Merci beaucoup pour vos réponses !
Malheureusement, ça ne marche toujours pas... J'ai essayé ton code Sorano, mais ça ne change rien. J'ai également essayé de mettre le commentaire conditionnel avant, mais cette fois-ci c'est firefox qui prends en compte le commentaire et non plus IE...

Par contre je me suis rendue compte que je m'étais trompé dans le code. Dans la logique, ça devrait plutôt être ça :

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

Cette fois-ci en le plaçant avant le commentaire conditionnel, firefox n'en tiens pas compte, et IE non plus ceci dit...

Alors du coup j'ai trouvé une ristourne. J'ai mis le lien vers la feuille CSS IE sans la mettre en commentaire conditionnel, mais à la suite de l'autre. Comme ça :

[code=]
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link rel="stylesheet" media="screen" type="text/css; charset=utf-8" title="design" href="design.css"/>
<link rel="stylesheet" media="screen" type="text/css" title="ie" href="ie.css"/>
[/code]
J'ai exactement la même chose dans les deux feuilles de style, (sauf les élèments que je veux changer sous IE qui sont différents dans la CSS IE.)
En mettant la CSS générale en "charset=UTF-8", IE ne la prends pas en compte, et il considère l'autre. Firefox fait l'inverse, donc du coup ça marche..., bizarre non ? Il n'y a pas l'air d'avoir de conflit, mais je ne sais pas si c'est vraiment réglo comme technique...

Euh pardon, le code que j'ai mis dans le HEAD c'est ça :

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link rel="stylesheet" media="screen" type="text/css; charset=utf-8" title="design" href="design.css"/>
<link rel="stylesheet" media="screen" type="text/css" title="ie" href="ie.css"/>

Tes deux feuilles de style se ressemblent beaucoup dans leur code : une seule ligne diffère. Ton problème est principalement un problème de conception. Une feuille de style doit pouvoir être traitée par tous les navigateurs qui prennent en charge les CSS (IE, Firefox, Opera, Safari, etc.). Les feuilles de styles réservées à IE ne doivent comporter que des correctifs pour ce dernier. En procédant ainsi, tu factoriseras les règles CSS qui marchent aussi bien sous Firefox que sous IE et tu te faciliteras la maintenance.

Bref, appelle tes feuilles de style comme suit :

<link rel="stylesheet" media="screen" type="text/css" title="design" href="design.css"/>
<!--[if lte IE 7]>
<link rel="stylesheet" media="screen" type="text/css" title="ie" href="ie.css"/>
<![endif]-->

Et ne garde dans ie.css que ceci :

@charset "UTF-8";
#sousmenu
{
  left: 170px;
}

Bonjour,

elodcav a écrit :
Pour voir la différence entre firefox et IE, vous pouvez aller voir sur mon site ici :
http://www.elodiecavel.com/aurelia_livre.php
(c'est un problème de colonne qui est complétement décalée)

Non, c'est pas ça, tu as enlevé le commentaire conditionnel.
Le bon ordre est :
1 - la ou les feuilles de styles lues par tous les navigateurs…
2 - les commentaires contionnels qui ne seront lus que par IE (pour lui ça corrige ce qui à été déclaré précedement)

Exactement comme j'avais dit plus haut et comme Victor BRITO le montre dans son bout de code.

Bonjour,
Merci encore pour vos réactions. Mais je crois que n'avez pas compris ce que je vous ai raconté (ou je me suis mal exprimée... )
J'ai fait exactement ce que vous m'avez dit :
1) J'ai mis dans la feuille de style CSS uniquement avec les correctifs spécifiques à IE et j'ai viré le reste.
2)J'ai placé le code de Victor dans le HEAD, avec un lien sur ma feuille CSS "design.css" (qui est la CSS pout tous navigateurs), et ensuite en commentaire conditionnel, un lien vers la CSS IE "ie.css".

Vous pouvez vérifier sur IE, ça ne marche pas ! IE ne prends pas en compte ma feuille de style IE...

Je ne sait pas vérifier sur un autre navigateur, mais le design m'a l'air correct avec IE6.

As-tu fait un refresh de ton cache ?

Ha oui ? Oui bien sûr j'ai vidé le cache. J'ai IE 5.2, et il y a une superposition de la colonne des sous-menus (cf pièce jointe). ça ne te fait pas ça ?

Nope ça roule dans IE6

Par contre tester sous IE5, ça n'a pas vraiment d'intérêt.

elodcav a écrit :
Oui bien sûr j'ai vidé le cache. J'ai IE 5.2, et il y a une superposition de la colonne des sous-menus (cf pièce jointe). ça ne te fait pas ça ?

Tu aurais pu nous dire dès le départ que tu testais sous IE Mac. Il est normal que les commentaires conditionnels ne soient pas pris en compte, puisque les commentaires conditionnels ne fonctionnent que pour IE Windows (IE 5 Mac utilisant un moteur de rendu différent de celui d'IE Windows).

Soit dit en passant, et sauf erreur de ma part, Microsoft a arrêté de développer IE Mac en 2003, qui n'est plus téléchargeable depuis fin 2005 et ne fait plus l'objet de support technique de la part de Microsoft depuis bientôt 4 ans (Microsoft a alors conseillé aux utilisateurs d'IE Mac de migrer vers Safari). Autrement dit, tu testes une page sur un navigateur décédé, qui n'est plus guère utilisé aujourd'hui : ne te casse donc pas trop la tête avec lui.
Modifié par Victor BRITO (29 Jan 2010 - 19:50)

Ha oui d'accord... Pfff... Je ne savais pas que les commentaires conditionnels ne se lisaient pas sur mac. Tout s'explique alors !!! Je vais essayer de voir ça sur IE sur un PC alors... Il y a des chances pour que cette fois ça marche...
Merci pour vos conseils !