Commentaire conditionel en CSS

**enrico83600** · 22/01/2010, 00h14

Bonjour,

sur mon site j'ai un menu déroulant et dans ce menu déroulant j'ai mis dans mon mapage.css une image png de cette cette sorte :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
#menu li a:hover {background:#09c; color:#fff;} 
#menu li:hover > a {background:#09c; color:#fff;}
#menu li a.fly {background: url(arrow.png) no-repeat right top;}
#menu li a.fly:hover {background:#09c url(arrow.png) no-repeat right top;} 
#menu li:hover > a.fly {background:#09c url(arrow.png) no-repeat right top;}

Cependant le png ne fait pas bon ménage avec IE 6 donc je compte coder pour que cette image "fleche" en png ne soit pas d'actualité sur IE 6.

Pour cela je vais introduire cela dans ma page html dans la balise <head> :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Et donc créé un fichier ie6.css qui sera identique à mon mapage.css sauf que pour mes background cités ci dessus je ne mettrait pas mon arrow.png.

Je n'ai pas encore testé, mais dans la logique des choses comme je vous ai présenté ma façon de résoudre le problème, ca devrait marcher.

Mais la je me demande : est ce qu'il y a un moyen de résoudre ce probleme autrement qu'en créant 2 fichiers css ? C'est à dire, puis je poser ma conditions autrement, peut etre meme directement dans mon mapage.css pour que mon arrow.pgn ne s'affiche pas si je suis sous IE6 ?

Merci d'avance

nb : je sais qu'au lieu de faire ma fleche en png je pourrais la faire en jpg en mettant les couleurs autour de cette fleche de la meme couleur que mon background, mais ca m'oblige à retoucher trop d'image car j'utilise plusieurs types de fleche.

**kohsaka** · 22/01/2010, 10h09

Salut a toi,

Tout d'abord, lorsque tu veux surcharger une feuille de style pour ie, il n'est pas la peine de reprendre tous les styles, uniquement ceux que tu modifies. Il faut bien prendre garde a l'ordre d'appel de tes feuilles de style :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
<link rel="stylesheet" href="css/ie6.css" type="text/css" />
<!--[if lte IE 7]><link rel="stylesheet" href="css/ie7.css" type="text/css" /><![endif]-->
<!--[if lte IE 6]><link rel="stylesheet" href="css/ie6.css" type="text/css" /><![endif]-->

De cette manière, si tu as besoin de surcharger des styles à la fois pour ie6 et ie7, tu les mets dans ie7.css

Deuxièmement, le code que tu proposes ne marchera pas sur ie6 puisqu'il ne prend pas en compte les chevrons ">" je te conseille de rajouter une classe sur le div que tu vises plutôt.

Finalement pour que tes png marchent sous ie6, tu as la solution suivante :

http://www.twinhelix.com/css/iepngfix/

Tu pourras trouver d'autres script dans le même genre sur le net, si celui ci ne te convient pas.

Bonne chance.

**enrico83600** · 24/01/2010, 02h49

Salut,

merci pour tes propositions et remarques, mais j'ai trouvé plus simple : enregistrer sous png-8 qui est 100% compatible IE6

Merci quand même

**kohsaka** · 25/01/2010, 09h57

Enregistrer une image en png-8 reviens au même que de faire un gif, c'est à dire une qualité assez médiocre si tu as la transparence à gérer.

Toutefois, si le résultat te convient, c'est la meilleur des solutions.

Commentaire conditionel en CSS

CSS

Vue hybride

Discussions similaires

Partager

Partager