[SOLUTION] Differencier IE6 IE7 et FIREFOX en CSS

le Jeu Jan 10, 2008 7:32

Koxin-L a écrit:Pffff, arrête de faire ta quiche...

Ouais, design digne d'un template à 5€.
Tu codes comme une tanche...

Moi, je te dis que je code correctement, même si j'ai pas forcement du 100% valide, et que les hacks n'encombrent pas plus que les condition, voir moins justement parce que je sais faire une css.

Et les commentaire font partie intégrante d'un code, donc, sont des codes.

Moi, critique de crosoft ? Je me marre. On a pas le droit de dire que il est correct d'utiliser des hack face à un nav mal codé ?

Par contre :
milkiway a écrit:Sur mon site http://www.nicetrotter.fr/ je n'ai aucun hack, aucun IF et ça foncitonne sur IE...
Par contre il faut savoir coder.

Ouahhhh, un template à 1€ et un css avec 3 div, quel puissance...

Je m'incline devant tant de grandeur.

Baltringue.

je savais que pouvoir faire ça avec si peu de div et si peu de css allait t'impressionner

à bon entendeur salut
il suffit de voir tout tes posts sur le forum tu n'interviens que pour critiquer sèchement
tu dois être sacrément introverti dans la vie mon pauvre :lol:

le Jeu Jan 10, 2008 8:28

Koxin-L 1 / Milkyway : 0

le Jeu Jan 10, 2008 14:11

NxtGen a écrit:urf ca balance sec...
Pour remettre le topic dans le droit chemin :

Personnellement j'ai utilisé pour nombreux de mes sites l'astuce !important pour différencier IE<7 et FF et autres, mais avec l'arrivée d'IE7 qui interpréte le css un peu mieux que IE6, ca à foutu un peu le bazard.

Du coup, pour les nouveaux sites que je développe, j'utilise ça :

Code: Tout sélectionner
<style type="text/css" media="all">@import url("global.css");</style>  

le global.css est la feuille de style principale, et je rattrape les petites différences si besoin avec une feuille de style dédiée par navigateur

Je trouve cela plus pratique que le !important puisque meme s'il y a une nouvelle évolution des navigateurs, cette astuce restera normalement fonctionnelle.

Ok, merci pour le tips. Donc si j'ai bien compris dans global-ie6.css tu réecris les proprietes comme si on voulait "ecraser" celle qui se trouve dans global.css

Du style :
#conteneur ...blabla dans global.css

#conteneur ... blabla dans global-ie6.css et ca "écrase" ce qui a été dit dans global.css

C'est bien ça ? Si oui, est-ce qu'il y'a des soucis niveau validation ?

Merci.

le Jeu Jan 10, 2008 18:51

Oui c'est bien ca
par exemple dans global.css il y a :

Code: Tout sélectionner: #conteneur { position: absolute; top: 200px; left: 200px; padding: 10px 5px 10px 5px; }

et dans global-ie6.css

Code: Tout sélectionner: #conteneur { padding: 15px 10px 15px 10px; }

et pour IE6, c'est donc la seconde valeur du padding qui sera prise en compte puisqu'elle écrase l'autre.

niveau validation aucune idée... je n'ai aucune erreur dans la console d'erreur de firefox en tous cas.

le Mar Sep 02, 2008 14:57

NxtGen a écrit:Oui c'est bien ca
par exemple dans global.css il y a :

Code: Tout sélectionner
#conteneur { position: absolute; top: 200px; left: 200px; padding: 10px 5px 10px 5px; }

et dans global-ie6.css
Code: Tout sélectionner
#conteneur { padding: 15px 10px 15px 10px; }

et pour IE6, c'est donc la seconde valeur du padding qui sera prise en compte puisqu'elle écrase l'autre.

niveau validation aucune idée... je n'ai aucune erreur dans la console d'erreur de firefox en tous cas.

Merci infiniment pour cette astuce NxtGen, je rencontre un soucis avec IE 6 uniquement et je ne savais pas comment m'y prendre pour corriger tout ça ^^

le Lun Mar 30, 2009 11:58

Je suis étonné que personne n'ai mentionné la solution suivante.

Vous avez également la possibilité d'utiliser # / ou _ pour cibler les navigateurs que vous souhaitez.

Une feuille CSS codée correctement ne demande pas 40 "hacks" pour être compatible auprès de tous les navs.

Je vous invite à tester le code suivant.

Code: Tout sélectionner: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Test CSS - Navs</title> <style type="text/css" media="screen"> p{ color: #000; /* Couleur pour tous les navs */ #color: yellow; /* Ecrase les précédentes pour IE 7 ET IE 6 */ _color: red; /* Ecrase la déclaration précédente pour IE 6 */ } </style> </head> <body> <p>Mon test de couleur</p> </body> </html>

En clair :
- On déclare pour tous les navs.
- Puis on écrase pour tous les IE.
- Puis on écrase pour IE6.

En espérant que ça puisse vous servir (/ et # se comportent de la même façon avec IE)

[SOLUTION] Differencier IE6 IE7 et FIREFOX en CSS

Re: [SOLUTION] Differencier IE6 IE7 et FIREFOX en CSS

Formation recommandée sur ce thème :

Lectures recommandées sur ce thème :

Qui est en ligne