CSS: IE VS Firefox
rey-s
Messages postés
74
Date d'inscription
Statut
Membre
Dernière intervention
-
Revan26914 Messages postés 1778 Date d'inscription Statut Contributeur Dernière intervention -
Revan26914 Messages postés 1778 Date d'inscription Statut Contributeur Dernière intervention -
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
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:
- CSS: IE VS Firefox
- Css download - Télécharger - HTML
- Enlever le soulignement d'un lien css ✓ - Forum Réseaux sociaux
- Css ligne horizontale ✓ - Forum CSS
- Enlever le soulignage des lien. - Forum CSS
- Enlever soulignement lien css ✓ - Forum CSS
23 réponses
Bonjour,
tu peux utiliser un conditionnal comment:
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
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
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 :
Pour ce code CSS
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 :
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...
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...
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? :)
Je ne préfere pas opter pour cette solution, mais merci à toi macgawel de m'avoir répondu ^^
Toujours rien à part ça? :)
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...
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...
Arg, ces sales clients qui font rien qu'à baisser le chiffre d'affaire quand on leur fait comprendre que leur navigateur est pourri ^^
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 ^^
alors regarde a quoi tu t'exposes :
http://www.gtalbot.org/BrowserBugsSection/MSIE7Bugs/
xD lol ^^
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
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)
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
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
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?
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?
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..
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..
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 !
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 !
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)
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...
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...
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..
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
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)
Donc toujours personne pour cette solution (Je désespère lol)
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" />';
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" />';
j'ai déjà répondu à ta question pour les deux feuilles de style. Il faut utiliser ce code:
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:
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:
@+
Revan
<!--[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
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
<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
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" ?
<!--[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" ?
Bonjour Revan26914
Est ce que ces lignes sont correctes ?
Par ce que chez cela ne marche pas.
Merci
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
Bonsoir,
Le <!--[ELSE]> n'existe pas. Le bon code est:
Tu peux aussi utiliser le PHP:
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
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
