CSS: IE VS Firefox

Fermé
rey-s Messages postés 74 Date d'inscription jeudi 5 juin 2008 Statut Membre Dernière intervention 19 mars 2010 - 6 juin 2008 à 15:24
Revan26914 Messages postés 1778 Date d'inscription dimanche 14 octobre 2007 Statut Contributeur Dernière intervention 15 octobre 2019 - 9 juil. 2009 à 21:39
Bonjour,

J'ai un petits soucis, on m'as demander de déplacer un menu déroulant horizontale, et de le mettre n verticale dans le corps du site (jusqu'à présent il était positionner sur le coter) mais je galère car le css ne donne pas du tous la même chose sur IE et Firefox..
J'aimerais savoir quelle solution j'ai (Hormis trouver une configuration qui 'passe' pour les deux navigateur car quoi qu'il arrive on perds de "l'esthétisme"..

Je sais que l'on peu crée deux pages css l'une pour chaque navigateur, mais je ne sait pas comment les lier (suivant le navigateur de connexion)..

Donc voila j'attends vos propositions en espérant qu'elles seront simple à mettre en œuvre (je suis pas un expert ^^)

Merci
A voir également:

23 réponses

Revan26914 Messages postés 1778 Date d'inscription dimanche 14 octobre 2007 Statut Contributeur Dernière intervention 15 octobre 2019 320
6 juin 2008 à 16:10
Bonjour,


tu peux utiliser un conditionnal comment:

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




dans ce cas là, tu dois utiliser une deux feuilles de style: une pour les navigateurs autres que IE, et une pour IE.



Cordialement

Revan
1
macgawel Messages postés 664 Date d'inscription mercredi 7 mai 2008 Statut Membre Dernière intervention 1 novembre 2008 89
6 juin 2008 à 16:54
Bonjour.

Suivant ce que tu as à faire (le nombre et l'importance des différences), tu peux essayer quelques "tricheries" pour conserver un unique fichier CSS (à vérifier, je ne sais pas comment IE 7 gère les CSS...) :
Prends un fichier html :
<ul id="menu">
<li>Liste enfant
<ul><li>liste petit-enfant</li></ul>
</li>
</ul>

Pour ce code CSS
#menu li{
color:red ! important;
color:black;}


Le marquage !important, comme son nom l'indique est sensé forcer le CSS à utiliser la ligne marquée en priorité. Mozilla le gère bien, mais IE non.
=> Sous Mozilla : tu as te <li> en rouge. Sous IE6 elles sont en noir.

De la même manière, IE6 ne sait pas gérer la notation "enfant immédiat" (je ne suis pas sûr de l'appellation exacte). Notation pere>fils :
#menu li {
   color:red;
}
#menu>li {
   color:black;
}

Le contenu des <li> de menu est en rouge.
Le contenu des <li> directement fils de menu est en noir.

On devrait avoir "Liste enfant" en noir, et "liste petit-enfant" en rouge.
En pratique ça ne marche que sous Mozilla. Sous IE tous les <li> seront en rouge...
1
rey-s Messages postés 74 Date d'inscription jeudi 5 juin 2008 Statut Membre Dernière intervention 19 mars 2010 1
6 juin 2008 à 17:00
Une tactique de "tricheries" ne m'arrange pas trop, car avec cette technique il est possible qu'a la prochaine MAJ de ie toutes les commandes qui devrait être lue par firefox uniquement le soit aussi par la new version de ie, d'ailleurs comme tu l'a dit tu ne sait pas ce que cela donne sur ie-7..
Je ne préfere pas opter pour cette solution, mais merci à toi macgawel de m'avoir répondu ^^

Toujours rien à part ça? :)
1
macgawel Messages postés 664 Date d'inscription mercredi 7 mai 2008 Statut Membre Dernière intervention 1 novembre 2008 89
6 juin 2008 à 17:12
Le problème, c'est que quoi que tu utilises, tu risques d'avoir des problèmes sur une prochaine MàJ.

A la limite, ces "tricheries" ont un avantage (à mon avis), c'est qu'un navigateur respectant les normes affichera toujours la même chose (modulo les différences de valeurs par défaut).

Si tu utilises des fichiers différents, il te faudra déjà un fichier IE6, un pour IE7, un pour les autres. Et éventuellement en rajouter encore un nouveau pour IE8 - voire pour la prochaine MàJ de IE7...
0
Grunt Messages postés 2773 Date d'inscription jeudi 17 janvier 2008 Statut Contributeur Dernière intervention 3 avril 2009 301
6 juin 2008 à 17:08
Arg, ces sales clients qui font rien qu'à baisser le chiffre d'affaire quand on leur fait comprendre que leur navigateur est pourri ^^
1
Brachior Messages postés 613 Date d'inscription dimanche 21 octobre 2007 Statut Membre Dernière intervention 22 juin 2009 46
6 juin 2008 à 17:23
si tu veux vraiment etre conforme aux normes et a ie ...
alors regarde a quoi tu t'exposes :
http://www.gtalbot.org/BrowserBugsSection/MSIE7Bugs/
xD lol ^^
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
yoogui Messages postés 2021 Date d'inscription dimanche 23 décembre 2007 Statut Membre Dernière intervention 13 avril 2011 316
6 juin 2008 à 15:26
Lol, rien qu'avec le titre CSS = FireFox
0
Smoking bird Messages postés 870 Date d'inscription mardi 11 mars 2008 Statut Membre Dernière intervention 10 juillet 2011 58
6 juin 2008 à 15:32
En javascript tu peux effectuer des tests avec certaines fonctions, si celles ci ne marchent pas, tu peux en déduire le type de navigateur sur lequel tu te retrouve, et en fonction de ça, lier la bonne feuille CSS. J't'avouerais que j'ai pas mon bouquin javascript sous la main, donc j'peux pas te les filer là maintenant ;) par contre, la détection sera toujours sujette à erreurs ^o)
0
rey-s Messages postés 74 Date d'inscription jeudi 5 juin 2008 Statut Membre Dernière intervention 19 mars 2010 1
6 juin 2008 à 16:11
Merci quand même ^^

Par contre si l'on pouvait éviter le javascript ça m'arrangerais (pas expert du tous j'avais dit ^^)

Personne n'a d'idée? Jpensais à une page qui permetrais de commuter les feuilles de style exemple:

"Cliquer ici pour une optimisation firefox"
"cliquer ici pour une optimisation IE"

Je ne sais pas si c'est possible et si oui, je ne sait pas comment lier deux css à une page (A moin de faire deux site différent un pour ie et l'autre pour firefox mais ça deviendrais trop conséquent..)

Voila voila

PS: Yoogui pas compris O_o
0
Revan26914 Messages postés 1778 Date d'inscription dimanche 14 octobre 2007 Statut Contributeur Dernière intervention 15 octobre 2019 320
6 juin 2008 à 16:25
La manière que j'explique plus haut (conditionnal comment) est plus simple. Ça s'occupe automatiquement de déterminer si c'est Internet Explorer ou un autre navigateur et si c'est IE, alors il utilise la feuille de stylle (CSS) pour IE.


@+
0
rey-s Messages postés 74 Date d'inscription jeudi 5 juin 2008 Statut Membre Dernière intervention 19 mars 2010 1
6 juin 2008 à 16:27
Je viens de voir ton message Revan

J'ai mis ton code dans mon head, j'ai crée un fichier ie.css j'ai heberger dans mon serveur, puis j'ai actualiser ma page IE,
ça n'a rien changer...
J'ai mal fait quelque chose?
0
Revan26914 Messages postés 1778 Date d'inscription dimanche 14 octobre 2007 Statut Contributeur Dernière intervention 15 octobre 2019 320
6 juin 2008 à 17:10
Tu as changer le CSS de ie.css ?

car il faut aussi modifier le CSS ie.css afin qu'il soit compatible avec Internet Explorer. Faire copier/coller du même CSS qui ne fonctionne pas avec IE ça ne changera rien..

0
Revan26914 Messages postés 1778 Date d'inscription dimanche 14 octobre 2007 Statut Contributeur Dernière intervention 15 octobre 2019 320 > Revan26914 Messages postés 1778 Date d'inscription dimanche 14 octobre 2007 Statut Contributeur Dernière intervention 15 octobre 2019
6 juin 2008 à 17:29
oupss désolé. C'est en fait ça le code qui faut mettre:


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



0
macgawel Messages postés 664 Date d'inscription mercredi 7 mai 2008 Statut Membre Dernière intervention 1 novembre 2008 89
6 juin 2008 à 17:17
Tu as pensé à vider le cache ? :-P

(Au passage : si tu fais ton site en PHP, tu peux récupérer des infos sur le navigateur et/ou l'OS, et mettre le CSS qui va bien en fonction...)
0
rey-s Messages postés 74 Date d'inscription jeudi 5 juin 2008 Statut Membre Dernière intervention 19 mars 2010 1
6 juin 2008 à 16:48
Up !

Please i need help ^^
0
Grunt Messages postés 2773 Date d'inscription jeudi 17 janvier 2008 Statut Contributeur Dernière intervention 3 avril 2009 301
6 juin 2008 à 16:59
Sinon tu fais comme certains sites : "ce site est conforme aux spécifications du W3C, veuillez utiliser un navigateur compatible"

j'en ai même vu un qui listait une dizaine de navigateurs, en indiquant:
"Firefox: compatible, Opera: compatible, Safari: compatible, ... etc.. etc.. Internet Explorer: imcompatible"

T'y es pour rien si les gens ont installé un navigateur qui comprend mal le CSS, quand même !
0
rey-s Messages postés 74 Date d'inscription jeudi 5 juin 2008 Statut Membre Dernière intervention 19 mars 2010 1
6 juin 2008 à 17:03
Yep Grunt, j'ai pensé à carrément crée le site optimiser pour firefox, mais le boss (je suis en stage et je crée un site pour une entreprise) tiens à son IE, et tiens aussi à ce qu'il soit compatible avec un maximum de navigateur (Opera, safari etc.. pour l'instant je me concentre que sur fire et IE)
0
Revan26914 Messages postés 1778 Date d'inscription dimanche 14 octobre 2007 Statut Contributeur Dernière intervention 15 octobre 2019 320
6 juin 2008 à 17:13
et il a raison! Si on fait des sites uniquement compatibles pour Firefox, les millions d'utilsateur d'IE ne viendront pas sur le site ;)

0
rey-s Messages postés 74 Date d'inscription jeudi 5 juin 2008 Statut Membre Dernière intervention 19 mars 2010 1
9 juin 2008 à 09:53
De retour après un petit week end ^^

Donc c'est la merd* quoi lol

Personne ne sait comment on pourrais s'arranger pour les histoire de deux feuilles de style (Que selon le navigateur on en utilise une ou l'autre..)?? Car je pense que c'est la meilleur solution...
0
yoogui Messages postés 2021 Date d'inscription dimanche 23 décembre 2007 Statut Membre Dernière intervention 13 avril 2011 316
9 juin 2008 à 09:56
Regarde par exemple.Faut pas utiliser IE, c'est le truc qu'utilise ceux qu'ils sont trop flemmard ou trop ignorant pour avoir FF, le meilleur programme de navigation web..
0
rey-s Messages postés 74 Date d'inscription jeudi 5 juin 2008 Statut Membre Dernière intervention 19 mars 2010 1
9 juin 2008 à 10:04
Peut être mais quand on à pas le chois on à pas le choix ^^
0
yoogui Messages postés 2021 Date d'inscription dimanche 23 décembre 2007 Statut Membre Dernière intervention 13 avril 2011 316
9 juin 2008 à 10:04
Pas le choix...FireFox est gratuit et ne prend pas beaucoup de place sur le disque
0
rey-s Messages postés 74 Date d'inscription jeudi 5 juin 2008 Statut Membre Dernière intervention 19 mars 2010 1
9 juin 2008 à 10:14
T'es dans une entreprise le client est roi, une majorité d'utilisateur utilise IE, donc quand ton patron te dit IE (Cf plus haut je sais pas si tu a lu) ba tu fait IE c'est tout... Crois moi je prefererais firefox aussi... Mais c'est pas possible de mettre la page optimiser en firefox et de mettre un petit lien donnant sur le teléchargement de FF, je pense vraiment pas que le patron apprécierais lol
0
yoogui Messages postés 2021 Date d'inscription dimanche 23 décembre 2007 Statut Membre Dernière intervention 13 avril 2011 316
9 juin 2008 à 10:16
Il te reste plus qu'à faire du boulot pourri et prévenir au boss que c'est ce qu'il a demandé ^^
0
rey-s Messages postés 74 Date d'inscription jeudi 5 juin 2008 Statut Membre Dernière intervention 19 mars 2010 1
9 juin 2008 à 10:22
Wep mais si je pouvais m'arranger pour faire une version avec firefox (2 feuille CSS) ça serait mieux :)

Donc toujours personne pour cette solution (Je désespère lol)
0
macgawel Messages postés 664 Date d'inscription mercredi 7 mai 2008 Statut Membre Dernière intervention 1 novembre 2008 89
9 juin 2008 à 10:37
Re.

Si ton site est en php, tu peux récupérer les infos sur le navigateur utilisé avec $_SERVER['HTTP_USER_AGENT'].
Ensuite, suivant le navigateur tu utilise la feuille CSS qui va bien...

$nav = "ff"; // Par défaut, on utilise la feuille de style pour FF
if ( strpos($_SERVER['HTTP_USER_AGENT'], 'MSIE 6' )) {
$nav = "ie6";
}
elseif ( strpos($_SERVER['HTTP_USER_AGENT'], 'MSIE 7' )) {
$nav = "ie7";
}
// On peut rajouter des tests pour les autres navigateurs...

// On insère la feuille de style, suivant le navigateur
echo '<link type="text/css" rel="stylesheet" href="style_'.$nav.'.css" />';
0
Revan26914 Messages postés 1778 Date d'inscription dimanche 14 octobre 2007 Statut Contributeur Dernière intervention 15 octobre 2019 320
9 juin 2008 à 12:13
j'ai déjà répondu à ta question pour les deux feuilles de style. Il faut utiliser ce code:


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




C'est simple, c'est juste une ligne à ajouter au code entre les balises <head></head>

Tu crées ta feuilles pour tous les navigateurs et tu mets ton lien vers ta feuille de style:
 <link rel="stylesheet" media="screen" type="text/css" title="Design" href="style.css" />


ensuite tu crées une feuilles de style ie.css en copiant et collant le contenu de "style.css" et tu modifies le code afin que ce soit compatible avec Internet Explorer. Pour finir, tu insères le code suivant:


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





@+

Revan
0
Revan j'avais déjà essayer ton code, il n'avait pas fonctionner, tiens le code que j'ai fait:

<head>
<title>Adenia</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!--[if IE]> <link href="ie.css" rel="stylesheet" type="text/css" media="screen"> <![endif]-->
<link rel="stylesheet" media="screen" type="text/css" title="Design" href="adenia.css" />
<script type="text/javascript">

Il ne fonctionne pas et prend toujours comme base la feuille de style de firefox...

(Ma feuille de style IE s'appelle ie.css c'est pour ça que j'ai changer ton href="style/ie.css")

macgawel, ton code ma donner une page blanche pour les deux navigateur :d
0
Revan26914 Messages postés 1778 Date d'inscription dimanche 14 octobre 2007 Statut Contributeur Dernière intervention 15 octobre 2019 320
9 juin 2008 à 15:31
Juste une petite chose avant, il manque un slash (même si c'est pas ça le problème^^):

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


Est-ce que tu as modifié le CSS ie.css? Ou tu as gardé le même que adenia.css" ?



0
gaby10 Messages postés 445 Date d'inscription vendredi 25 novembre 2005 Statut Membre Dernière intervention 3 février 2013 57 > Revan26914 Messages postés 1778 Date d'inscription dimanche 14 octobre 2007 Statut Contributeur Dernière intervention 15 octobre 2019
9 juil. 2009 à 11:39
Bonjour Revan26914
Est ce que ces lignes sont correctes ?
<!--[if IE]> <link href="ie.css" rel="stylesheet" type="text/css" media="screen"> 
		<!--[ELSE]>
		<link href="ff.css" rel="stylesheet" type="text/css" media="screen">
		<![endif]-->


Par ce que chez cela ne marche pas.
Merci
0
Revan26914 Messages postés 1778 Date d'inscription dimanche 14 octobre 2007 Statut Contributeur Dernière intervention 15 octobre 2019 320 > gaby10 Messages postés 445 Date d'inscription vendredi 25 novembre 2005 Statut Membre Dernière intervention 3 février 2013
9 juil. 2009 à 21:39
Bonsoir,

Le <!--[ELSE]> n'existe pas. Le bon code est:

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


Tu peux aussi utiliser le PHP:
<?php
if (ereg("MSIE", $_SERVER["HTTP_USER_AGENT"]) AND !ereg("MSIE 8.0", $_SERVER["HTTP_USER_AGENT"]))
{
	echo '<link href="ie.css" rel="stylesheet" type="text/css" media="screen" />';
}
else
{
	echo '<link href="ff.css" rel="stylesheet" type="text/css" media="screen" />
}
?>


J'ai rajouté !ereg("MSIE 8.0", $_SERVER["HTTP_USER_AGENT"]) à la condition parce que Internet Explorer 8 est beaucoup plus respectueux des standards ce qui permet d'utiliser une feuille de style normal. Et si on utilise la même feuille de style pour IE 8 que pour les anciennes versions, c'est la catastrophe ;-)


Cordialement

Revan
0
rey-s Messages postés 74 Date d'inscription jeudi 5 juin 2008 Statut Membre Dernière intervention 19 mars 2010 1
9 juin 2008 à 15:24
Personne?
0