28173 sujets

CSS et mise en forme, CSS3

Pb affichage conditionnelle css sous IE7

Bonjour,

J'ai fait une fonction conditionnelle pour avoir une feuille de style (style.css) appropriée pour tous les navigateurs (IE7, Firefox, Safari...) sauf IE 6 ; et donc une feuille de style uniquement pour Internet Explorer (et les versions précédentes).

Voici le code :

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>titre de mon site</title>
<!--[if IE 7]><-->
<link rel="stylesheet" href="css/style.css" type="text/css" />
<!--><![endif]-->

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


Tout fonctionne bien (la conditionelle fonctionne bien), sauf que sous IE7, s'affiche tout en haut de mes pages html ce petit bout de code (comme du texte html)
<-->


Je pense qu'il prends donc "un morceau" de la conditionnelle comme du texte, mais je ne sais pas comment régler le problème (sous firefox aucun pb...)

Merci pour votre aide.

Julie
Ils sont louches tes CC Smiley lol

Normalement c'est du style :
<!--[if ie 7]>
  <pouet />
<![ endif]-->


(vire l'espace entre [ et endif)
bonjour, moi j'aimerai bien savoir c'est quoi ca : 


<-->

Juste en dessous du title a mon avis c'est juste un oublie de ta part qui laisse trainer de truc comme cela et les affiches Smiley lol
Bonjour,

je crois que tu as faire une erreur lorsque tu as tapé le commentaire conditionnel pour IE 7, en effet "<-->" apparait seul dans le if


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


en corrigeant comme cela ca irait mieux je pense ?
Modifié par rafale29 (18 Jul 2007 - 14:10)
J'ai testé ce que vous me dites, mais du coup aucune feuille de style n'est pris en compte sous Firefox (la conditionnelle fonctionne bien sous IE7 et IE6 mais firefox ne prends aucune des 2 css).

De plus ce code je l'ai pris sur un site (voir dans la page un peu plus bas), cliquer ici pour le voir, citer dans un de post de ce forum et comme étant une bonne référence... Je n'ai fais que du copier coller, donc je ne comprends pas...

J'ai également bien vérifié mon code, et il n'y a pas de bout de texte qui se balade.

Si kelk'un a une idée lumineuse ?
Merci.
Juste pour info voici l'article de

a écrit :
L'intérêt de cette technique est cependant de pouvoir viser, à nouveau, telle ou telle version d'IE Windows, en jouant sur les conditions et les numéros de version. Par exemple: 

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

<!--[if lte IE 6]>
   <link rel="stylesheet" href="old-ie.css" type="text/css" />
<![endif]-->La première feuille de style:


sera lue par Safari, Firefox, Opera, etc.
sera également lue par IE7, conformément à la condition [if IE 7]
mais ne sera pas lue par IE5.x et 6.0 Windows.
En meme temps si la feuille de style ie7 et celle de FF et la meme tu es pas obligé de mettre le hack pour celle de ie7 Smiley lol

Essai en enlever le hack de celle de ie7 pour voir
j'ai déjà essayé, et dans ce cas la conditonnelle poour IE 6 et les versions antérieures n'est pas prise en compte, il prend comme référence "style.css" et non "styleIE6"...

Je sais c'est un vrai casse tête...
Non , si je mets uniquement :

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>toto</title>
<link rel="stylesheet" href="css/style.css" type="text/css" />
<!--[if IE 6]>
<link rel="stylesheet" href="css/styleIE6.css" type="text/css" />
<![endif]-->


dans ce cas IE6 prends la feuille de style "style.css", et la conditionnelle ne fonctionne pas ?
Merci. Finalement j'ai trouvé une solution...
c'est pas super propre (pourquoi faire simple quand on peut faire compliquer Smiley murf ) mais ca marche sur tous les navigateurs


<!--[if !IE]> <-->
   <link href="css/style.css" rel="stylesheet" type="text/css" />
<!--> <![endif]-->
<!--[if IE 7]>
   <link href="css/style.css" rel="stylesheet" type="text/css" />
<![endif]-->
<!--[if lte IE 6]>
<link rel="stylesheet" href="css/styleIE6.css" type="text/css" />
<![endif]-->


Si je traduits voilà ce que ca fait :
> Tout les navigateurs différents d'IE prennnet la css "style.css"
> Si c'est IE7 prends la css "style.css"
> Si c'est versions antérieures ou égale à IE6 ca prends styleIE6.css

J'ai testé sur les 3 (IE6, IE7 et firefox) et j'arrive au résultat souhaité...
Allo,
J'utilisais ça avant et ça marchait très bien...
Petit problème ce matin/nuit...
Ça me prend la même chose mais pour Firefox...
Le truc marche bien sur Ie 6-7 et Safari, mais Firefox me fait "Biiiipppp" et pleurer Smiley bawling
Vous avez un truc ?
Byebye
Caro
Bonjour,

En général, on n'a pas besoin de ce genre de circonvolutions étranges. On peut se contenter:
- d'une feuille de styles générale, qui sera prise en compte par tous les navigateurs (dont IE6);
- d'une feuille de styles contenant uniquement des correctifs apportés à la feuille de styles générale, correctifs adressés à IE5-6 via un commentaire conditionnel qui va bien;
- à la rigueur, une autre feuille de styles de correctifs pour IE7, mais c'est rarement nécessaire.
Sujet clos
Aller à