probleme menu deroulant safari mais pas IE... Résolu/Fermé

Question

Bonjour, je vais vous décrire mon problème, avec un peu de bol des gens l'ont déjà rencontré. le site que je développe actuellement fonctionne quasiment partout après de nombreux tests, mais il reste 1 page (l'accueil...) qui ne fonctionne pas correctement sous safari j'ai trouvé au final que mon problème vient des "block" necessaire a IE7 pour afficher ce que je veux. voici le code qui pose probleme sous safari : div#menu li:hover {display: block; background: #0099FF;} div#menu li.sousmenu:hover {display: block; background: #0099FF;} a partir de la, si j'ai a peu près compris mon probleme , avec les commentaires je peu afficher une certaine page pour IE, et un autre pour les autres navigateurs, du genre mais si j'enchaine avec un pour les autres navigateurs, IE ne va t'il pas tenter de passer par les 2 feuilles css?

M@dien · Answer

Bonjour,

Si tu mets ton <link href="horizontal2.css" rel="stylesheet" type="text/css"> avant le commentaire conditionnel, ça devrait marcher.

En CSS, c'est la dernière propriété CSS rencontrée qui prime sur les autres.
Autrement dit, si on a 
a { color:blue; }
a { color:red; }
Le lien sera rouge, car c'est la dernière valeur rencontrée pour l'élément a.

bibifinal · Answer

oki merci bien, je debute en css au final, donc les priorités et tout je ne connais pas encore donc pour resumer, j'ai 2 possibilités, j'ai mon fichier "menuhorizontal.htm" qui appelle "horizontal.css" soit dans le htm: ou dans le css: tien en fait non j'ai pas l'info ici :) je pense que l'idéal , si c'est possible, serais de faire l'équivalent des commentaires, mais est ce que cela fonctionne? si oui div#menu li:hover {background: #0099FF;} <-- div#menu li:hover {display: block; background: #0099FF;} --> devrais fonctionner?

M@dien · Answer

Non, le commentaire conditionnel à l'intérieur du CSS ne fonctionne pas.

Le commentaire conditionnel de IE est un commentaire HTML que seul IE comprend. Une bonne initiative de la part de Microsoft pour éviter bien des arrachages de cheveux aux web-designers.

Cependant, en CSS, qui est un tout autre langage, le seul commentaire qui existe est le /* commentaire */
il est donc nécessaire de mettre le commentaire conditionnel dans le fichier HTML.

Il y a quelques "hack" css qui se basent sur des propriétés non gérées par IE, mais c'est de moins en moins valable au fil des versions de IE.

bibifinal · Answer

merci encore pour les réponses, donc pour être sur de ce que je fais concernant le css fonctionne comme vous m'avez dit? c'est a dire que c'est le dernier lien lu au final qui sera pris en compte? j'ai compris que cela s'appliquait en css, mais en html ?

M@dien · Answer

Pas tout à fait. en HTML, les navigateurs "normaux" ne verront que la ligne <link href="horizontal2.css" rel="stylesheet" type="text/css">, comme l'autre ligne est en commentaire.

Pour le navigateur bizaroïde qu'est IE, il prendra en compte les 2 lignes. donc IE sera affecté pas les 2 fichiers CSS.
Pour corriger les différences, il suffit de reprendre seulements les lignes qui posent problème.

Par exemple, dans horizontal2.css:
div#moche {
    color:red;
    background:green;
    margin-left:10px;}
Mais IE ne l'affiche pas au bon endroit, il faut modifier le margin-left!
Alors dans horizontal.css:
div#moche {
    margin-left:5px;}

Ainsi, le margin-left sera modifié sur IE, mais le div#moche sera quand même vert aux écritures rouges sur tous les navigateurs, y compris IE.

bibifinal · Answer

mince...mon problème subsiste donc, je suis a la base plutot dev d'appli, donc les nuances avec les différents explorateurs ...

bref, je sais pas si j'ai bien expliqué mon probleme, sur le site "http://www.infostravaux.com/" , apres de multiples galeres, le menu deroulant s'affiche correctement sur tout les IE (ce n'étais pas une tache facile...) et pour y arriver, IE 7 ne voulais pas tant que je ne mettais pas les "block" dans 
div#menu li:hover {background: #0099FF;} 

mais le probleme étant, si je les met, safari ne l'affiche pas sur l'index, si je les enlève c'est IE 7 qui ne les affiche pas...  (le menu déroulant ne se déplie pas je veut dire)

c'est une science étrange que je ne maitrise pas encore, donc merci encore de prendre du temps a m'aider a résoudre mon problème, qui en effet est très précis.

bibifinal · Answer

mon fichier css qui me pose probleme :


body {behavior: url(../csshover.htc);}

.img {
  position: absolute;
  top: 80px;
  left: 135px;
}
.membre {
  position: absolute;
  top: 70px;
  right:170px;
}



div#menu a {color:#FFFFFF; font-family: Trebuchet MS, Arial; font-size: small;}
div#menu ul {padding: 0; margin:0px; background: white; text-align:center}
div#menu li {background:#FF9900;}


/*PROBLEME ICI*/ 
div#menu li:hover {display: block; background: #0099FF;}
div#menu li.sousmenu:hover {display: block; background: #0099FF;}


/* rejout couleur de fond */
div#menu li.sousmenu {background-color:#FF9900}
/* rajout pr pour fleche direction bas et couleur de fond*/
div#menu li.plop { background-color:#0099FF;}

/* une petite bordure en top*/
div#menu ul li {position:relative; list-style: none; float:left; border-top:1px solid ; color:#33CCFF;}

div#menu ul ul {position: absolute;display:none; width:90px}
div#menu li a {text-decoration: none; padding: 4px 0 4px; display:block;width:90px}
div#menu ul.niveau1 li.sousmenu:hover ul.niveau2 {display: block;} 
div#menu ul.niveau2 li.sousmenu:hover ul.niveau3 {display:block;}
div#menu ul.niveau3 {top:-1px; left: 60px;}
div#menu ul.niveau4 {top:-1px; left: 60px;}

/* rajout de couleur de fond et de survol */
div#menu ul.niveau3 li { background: #FF9900}
div#menu ul.niveau3 li:hover {display: block; background: #0099FF}


/* rajout de couleur de fond et de survol */
div#menu ul.niveau4 li { background: #FF9900}
div#menu ul.niveau4 li:hover {display: block; background: #0099FF}

bibifinal · Answer

merci j'avance dans mon problème il suffirait donc de faire Code : dans le "horizontal2.css" Code : div#menu li:hover {background: #0099FF;} div#menu li.sousmenu:hover {background: #0099FF;} dans le "horizontal.css" Code : div#menu li:hover {display: block; background: #0099FF;} div#menu li.sousmenu:hover {display: block; background: #0099FF;} cela récrira la partie du code sans aucun probleme?

M@dien · Answer

oui, mais le display:block; sur le <li> est  inutile.

J'ai repris ta page et le code css, cela donne ça:

body {behavior: url(../csshover.htc);}

.img {
  position: absolute;
  top: 80px;
  left: 135px;
}
.membre {
  position: absolute;
  top: 70px;
  right:170px;
}

div#menu ul {
	padding: 0px;
	margin:0px; 
	list-style: none;
	text-align:center;}
div#menu ul ul {
	position: absolute;
	left:0px;
	display:none; 
	width:90px;}
div#menu li {
	border-top:1px solid #33CCFF;
	background:#FF9900;
	float:left;
	position:relative;
	left:0px;}
div#menu li:hover {
	background: #0099FF;}
div#menu a {
	display:block;
	width:90px;
	color:#FFFFFF; 
	font-family: "Trebuchet MS", Arial; 
	padding: 4px 0 4px; 
	text-decoration: none;
	font-size: small;}

div#menu ul.niveau1 li:hover ul.niveau2 {display: block; top:23px;} 
div#menu ul.niveau2 li:hover ul.niveau3 {display:block;top:-1px; left: 90px;}
div#menu ul.niveau3 li:hover ul.niveau4 {display:block;top:-1px; left: 180px;}
Ca s'affiche bien sur Firefox, IE8, Safari et Opera. j'avoue j'ai eu la flemme d'ouvrir chrome, mais il a le même comportement que les autres, et donc pas besoin d'adapter pour IE.

Cependant, un bug subsiste sur IE8 pour le niveau 3. je n'ai pas le temps de voir comment régler ça, mais pour moi c'est un bug pur et simple du navigateur.

bibifinal · Answer

pour le bug sous IE 8 au final je l'ai reglé en mettant un "<meta http-equiv="X-UA-Compatible" content="IE=edge" />" sur toutes mes pages...

en fait tu a rajouté le display: block;  au niveau du menu a et enleve les autres si je ne me trompe pas.
en effet cela fonctionne sur le site, sur safari, mozila, IE 6, mais pas encore testé sur IE 7 et 8, je n'ai pas encore installé le logiciel pour avoir tout les IE sur la machine.

merci encore, j'aurais joué sur plusieurs feuilles css mais bon, quand on peu faire simple...

M@dien · Answer

Le programme qui permet d'avoir plusieur IE sur sa machine s'appelle "multipleIEs" Je ne sais pas s'il y a une nouvelle version mais la mienne s'arrête à IE6. Donc pour avoir IE6, 7 et 8, il vaut mieux installer IE8 et aller en plus chercher la version portable de IE7. Comme ça on a tout et on passe son temps à faire des F5... Sinon, je gère l'apparition des sous-menus directement au niveau du

. Le display:block; présent pour le

permet seulement d'afficher les liens en block, pour pourvoir gérer leur largeur et hauteur. Note: mettre un sujet en résolu ne le vérouille pas, on peut toujours écrire dedans.

bibifinal · Answer

le logiciel est installé et fonctionne comme il faut en effet, pour IE 8  en théorie je l'ai d'installé sur une autre machine (portable) qui n'est pas la aujourd'hui, et comme IE 8 ne veut pas s'installer sur mon pc...le test dessus va devoir attendre...

pour le menu en fait la je viens de reprendre le site existant, de corriger la majorité des bugs divers et variés qui ont été fait, donc je n'ai pas trop réfléchit encore sur si c'était la bonne manière mais plus deja le faire fonctionner sur IE 6 (pas de prob ici :)) IE 7 (prob sans les block, il affichais le menu en decalé) IE 8 (le fait que le mode de compatibilité faisais bugger le menu) et safari :) 

je pense que je vais revoir bientôt tout le code, mais a priori cela fonctionne pour l'instant, ce qui est déjà une bonne base...

le lien du site si tu a 10 s (pas plus non plus, tout les problèmes (j'espère) sont réglés)
"infostravaux.com"

Probleme menu deroulant safari mais pas IE...

12 réponses

Discussions similaires