Commentaire conditionnel

Bonjour,

Je bute sur un problème de commentaire conditionnel que je n'rrive pas à résoudre malgré les recherches.
J'ai fais une page avec une image png transparente et j'ai prévu une image avec fond spécialement pour IE6.
J'utilise un commentaire conditionnel pour changer l'image:

     <div id="logo">
      <!--[if !IE 6]><-->
      <img src="indexim/logo10.png" alt="Logo" width="200" height="95" />
        <!--><![endif]-->  
      <!--[if IE 6]>
      <img src="indexim/logo10.jpg" alt="Logo" width="200" height="95" />
      <![endif]-->
      </div>
         

Le but est de dire que si on est sur IE6 on affiche le jpg sinon tous les autres navigateurs affichent le png. Ça marche presque: c'est à dire que je rencontre un problème avec IE 7 qui affiche sur la page <-->, ce qui est indésirable et en plus décale l'image.
Je n'arrive pas à comprendre d'où vient mon erreur. Si quelqu'un peut me renseigner, merci.

Salut Lamx,

Je pense que ta notation ne doit pas être tout à fait juste... Je te conseil de regarder le tutorial de Florent V.. J'ai pas bcp l'habitude de jouer avec les commentaires conditionnels, mais à vu de nez je dirais qu'il faut mettre :

<!--[if !IE 6]>
	<img src="indexim/logo10.png" alt="Logo" width="200" height="95" />
<![endif]-->

<!--[if IE 6]>
	<img src="indexim/logo10.jpg" alt="Logo" width="200" height="95" />
<![endif]-->

Modifié par Mikerob (16 Feb 2009 - 17:28)

Merci pour ta réponse rapide, mais j'ai essayé cette solution et cela marche pour IE7 mais par contre l'image ne s'affiche plus du tout sur firefox....

ok.. et si tu ajoute un commentaire conditionnel pour les autres navigateurs ?

Normalement :

    <!--[if !IE 6]><-->

      <img src="indexim/logo10.png" alt="Logo" width="200" height="95" />

        <!--><! endif -->  

C'est pour tout les navigateurs (y compris IE7 qui d'ailleurs optempère à part le bug que j'ai rapporté) sauf IE 6.
Et la suite :

  <!--[if IE 6]>

      <img src="indexim/logo10.jpg" alt="Logo" width="200" height="95" />

      <! endif -->

C'est pour IE 6, exclusivement. Donc je ne comprends pas bien ta remarque.

Ma faute, j'ai voulus aller trop vite . Les commentaires conditionnels sont propre à internet explorer (Comme celà est écrit dans le tuto que je t'ai conseillé mais que tu n'as pas lu ). donc en gros le code

<!--[if IE 6]>
      <img src="indexim/logo10.jpg" alt="Logo" width="200" height="95" />
<! endif -->

Est interprété par firefox comme :

<!-- un commentaire ... -->

Donc voilà, il te faut écrire du code pour les "autres navigateurs". Personnellement je metterais pas des éléments de contenu dans un commentaire conditionnel, mais plustôt une feuille de style CSS... Et donc dans ta page tu charge tes 2 images, et après tu les masquent avec un display:none en fonction du browser.. Mais bon c'est une idée comme ça, et elle n'est peut-être pas adaptée à ton site web.
Modifié par Mikerob (16 Feb 2009 - 18:40)

J'avais pourtant regarder ce tuto mais peut-être pas assez précisement. Je vais y retourner. En tout cas merci.

De mémoire il y a des problèmes avec la syntaxe proposée par Laurent Denis pour réserver du code à «tous les navigateurs sauf telle version d'IE». Justement cette histoire de caractères qui restent affichés car pas considérés comme faisant partie d'un commentaire. En tout cas c'est un problème qui a déjà été soulevé, et de mémoire aucune solution n'avait été trouvée.

Je crois que le problème c'est que lorsque IE7 rencontre ce code:

<!--[if !IE 6]><-->
      <img src="indexim/logo10.png" alt="Logo" width="200" height="95" />
<!--><![ endif ]-->

Il commence par analyser le commentaire conditionnel. Et comme il ne le concerne pas pas, il agit comme s'il n'était pas là, c'est à dire qu'il interprète ceci:

<-->
      <img src="indexim/logo10.png" alt="Logo" width="200" height="95" />
<!-->

Le <!--> final se comporte comme un commentaire autofermant, et est ignoré. Le <--> du début n'est pour sa part pas considéré comme un commentaire.
De leur côté, tous les navigateurs non-IE vont lire:

<!-- Bla bla commentaire -->
      <img src="indexim/logo10.png" alt="Logo" width="200" height="95" />
<!-- Bla bla commentaire -->

Il faudrait peut-être tester ceci:

<!--[if !IE 6]>-->
      <img src="indexim/logo10.png" alt="Logo" width="200" height="95" />
<!--<![ endif ]-->

Mais pour ma part je me tiens loin de cette syntaxe complexe et semble-t-il un peu casse-gueule...
Modifié par Florent V. (16 Feb 2009 - 19:42)

Bonjour Florent,

J'ai testé ta suggestion et le problème reste le même, cette fois c'est --> qui s'affiche sur IE7. Si je comprends bien le reste de ton message, il n'y a pas de solution, au moins du côté d'un commentaire conditionnel. Je vais essayer de contourner le problème autrement. En tout cas, merci pour la proposition et si une solution est trouvée (j'ai pas mal cherché déjà), je reste preneuse.

Bonjour,

Si vraiment il faut servir un png à IE7 et un jpg à IE6 avec des commentaires conditionnels

 
<div id="logo">

      <!--[if !IE ]><-->
      <img src="indexim/logo10.png" alt="Logo" width="200" height="95" />
      <!--><! endif -->  

      <!--[if IE 6]>
      <img src="indexim/logo10.jpg" alt="Logo" width="200" height="95" />
      <! endif -->

      <!--[if IE 7]>
      <img src="indexim/logo10.png" alt="Logo" width="200" height="95" />
      <! endif -->

</div>

Par contre cela fait peut-être beaucoup pour un logo.

a écrit :

Donc voilà, il te faut écrire du code pour les "autres navigateurs". Personnellement je metterais pas des éléments de contenu dans un commentaire conditionnel, mais plustôt une feuille de style CSS... Et donc dans ta page tu charge tes 2 images, et après tu les masquent avec un display:none en fonction du browser.. Mais bon c'est une idée comme ça, et elle n'est peut-être pas adaptée à ton site web.

Dans l'exemple présent (un logo) cette solution n'est pas bonne pour des raisons d'accessibilité et cela quelque soit le site web.

Une image porteuse de sens (présence du texte alternatif) ne doit pas intervenir dans une css mais en dure dans le code.
Modifié par knarf (18 Feb 2009 - 01:27)

knarf a écrit :
Bonjour,

Dans l'exemple présent (un logo) cette solution n'est pas bonne pour des raisons d'accessibilité et cela quelque soit le site web.

Une image porteuse de sens (présence du texte alternatif) ne doit pas intervenir dans une css mais en dure dans le code.

Comlpètement d'accord avec toi, mais c'est pas ce que je voulais dire . L'idée était de mettre les deux logos dans la page html avec la balise img comme il le fait déjà, mais de définir des class (ou des id) qui permettront d'afficher ou non le logo (avec un display:none). les styles chargés étant définis dans des feuilles de style, sélectionnées par des commentaires conditionnel .

Par contre c'est claire que c'est pas terrible terrible, mais bon, c'est lui qui veux 2 logos différent et2x le logo de la boite dans la même page là c'est plus un problème

Hello,

Juste une idée: le remplacement d'un PNG32 par un PNG8, GIF ou JPEG pour IE6 peut se faire en JavaScript (via un commentaire conditionnel visant IE6 pour un ciblage vraiment fiable).

En fait le problème était plus simple qu'il paraissait. Je voulais remplacer le png par un jpg pour IE6 à cause du fond gris que IE6 affiche pour les images transparentes. Ce qui peut se résoudre en enregistrant avec gimp une couleur de fond à l'image de la couleur voulue. J'ai mal exposé mon problème . En tout cas, c'est drôlement intéressant de voir les solutions proposées cela fait réfléchir. Merci.