affichage listes différents entre IE et FF aka THE Problem

Version imprimable

Voir 40 message(s) de cette discussion en une page

21/09/2006, 09h47
trotters213

affichage listes différents entre IE et FF aka THE Problem

:salut:
Je sèche sur un problème qui me parait bête mais je ne vois pas où est la faille.

Mes listes s'affichent bien sous FF et Opera mais sous IE ça me fait quelque chose de pas normal : mon texte est mauves sur fond transparent sans bordures alors que j'ai définit absolument toutes mes couleurs, j'ai un fond blanc et des bordures :koi:
Voici l'adresse où vous pouvez faire le test sous les différents navigateurs : http://www.mpl.ird.fr/IS/

Je me pose donc une question : a-t-on le droit de faire ceci dans la CSS sous IE : #menu ul > li > ... { ... }
Merci d'avance.
21/09/2006, 10h00
Bisûnûrs

Au passage sur IE on ne peut pas accéder aux sous-menus qui disparaissent avant. ^^

Tu ne peux pas simplement faire :

Code:

#menu li

?
21/09/2006, 10h12
trotters213

c'est ce que j'ai fait et je pense que ça vient de là puisque maintenant ça marche (enfin ça s'affiche comme je le souahite) donc je suppose que IE n'aime pas les ">".

Citation:

Au passage sur IE on ne peut pas accéder aux sous-menus qui disparaissent avant. ^^

Tu as anticipé ma seconde question : c'est dû au fait que je fait un margin:1px entre chaque cellule donc ça plante que sous IE.

Tu vois pas d'où ça pourrais venir?

PS : j'ai mis à jour le lien tu verras mieux le truc.
21/09/2006, 10h32
Bisûnûrs

A prioris le margin:1px fait que tu sors du menu quand tu passes sur une zone vide.

On ne peut même pas bidouiller en supprimant les margin:1px et mettre un <div style="height:2px"></div> à la place, étant donné que IE 6- met automatiquement un height de 20px pour toutes les valeurs inférieures.

Peut-être en mettant englobant tes sous-menus par un div global pour dire à IE qu'il est toujours dans le menu.

Edit : Qui plus est, sur IE le menu se décale sur la gauche quand on passe dessus. ^^
21/09/2006, 11h04
trotters213

Pour le décalage c'est bon, c'était à cause du margin :1px; il fallait faire : margin: 1px 0px 1px 0px; pour ne pas faire de marge sur les bords.
Par contre j'ai toujours le problème avec mes menus qui disparaisse.
21/09/2006, 11h13
trotters213

là il y a un truc qui me tue qu'en même c'est que si je vous mets la page entière http://www.mpl.ird.fr/IS/, les 2 premiers menus sous IE marche toujours pas, par contre le 4 marche comme il faut... :arf:
21/09/2006, 11h16
Bisûnûrs

Citation:

Envoyé par trotters213

là il y a un truc qui me tue qu'en même c'est que si je vous mets la page entière http://www.mpl.ird.fr/IS/, les 2 premiers menus sous IE marche toujours pas, par contre le 4 marche comme il faut... :arf:

Je viens de voir ça et j'allais te faire la remarque ...

Dès que j'ai un peu de temps je regarde le code source pour t'aider. =)
21/09/2006, 12h05
Bisûnûrs

Eh bien je dois dire que je suis bluffé ..

Code identique pour tous les sous-menus, mais interprétation sur IE différente pour ces sous-menus.

J'sais pas. :lol:

je suis en train d'essayer avec du javascript et avec un setTimeout de 500 milliseconde mais du coup mais sous-menu ne s'affiche pas du tout, je dois mal passer en paramètre mon id le problème c'est que je suis une tache en javascript. Tu t'y connais un peu?
Voilà le code javascript :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function attente(id) 
{
	var d = document.getElementById(id);
		for (var i = 1; i<=10; i++) {
			if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
		}
	if (d) {d.style.display='block';}
}
 
function montre(id)
{
	if (id) {setTimeout("attente()",5, id);} //si le champ est renseigné on appelle quasi directement montre pour qu'il affiche les sous-menus
	else {setTimeout("attente()",500, id);}	//sinon on attend une demi second avant d'enlever les sous-menus (comme ça on a le temps de passer d'un sous menu à un autre sans souci)
}

et voici comment je l'utilise :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<li onMouseOver="javascript:montre('smenu2');" onMouseOut="javascript:montre();"><img name="partenaires" src="img_ur_vf/partenaires.gif" alt="" />
	<ul id="smenu2">
		<li><a href="#">Sous-Menu 2.1</a></li>
		<li><a href="#">Sous-Menu 2.2</a></li>
		<li><a href="#">Sous-Menu 2.3</a></li>
	</ul>			
</li>	
<li onMouseOver="javascript:montre('smenu1');" onMouseOut="javascript:montre();"><img name="equipe" src="img_ur_vf/equipe.gif" alt="" />
	<ul id="smenu1">
		<li><a href="#">Sous-Menu 1.1</a></li>
		<li><a href="#">Sous-Menu 1.2</a></li>
		<li><a href="#">Sous-Menu 1.3</a></li>
	</ul>
</li>

21/09/2006, 14h00
Bisûnûrs

Code:

setTimeout(attente(id),5, id);

Les [double-]quotes signalent une chaîne, donc il faut les enlever quand tu appelles ta fonction attente();.

Renseigne aussi l'id en paramètre quand tu l'appelles, ça va te servir pour le getElementById dans la fonction. ^^

Edit : Eh bien ça n'a pas l'air de fonctionner plus que ça.
21/09/2006, 14h21
trotters213

Le problème c'est que si je fais ce que tu me dit j'ai cet erreur :

Citation:

Erreur : useless setTimeout call (missing quotes around argument?)
Fichier source : http://127.0.0.1/IRD/trans_image.js
Ligne : 15

et j'ai testé, ma fonction attente est bien appelée si je mets les double-quote(j'ai essayé avec un alert).

Je vais devenir fou :cry:
21/09/2006, 14h26
Bisûnûrs
J'ai essayé ça :
Code:

1 2 3 4 5 6 function montre(id) { alert(id); if (id) {setTimeout("attente(id)",5);} else {setTimeout("attente(id)",500);} }
Et en fait il me fait deux alertes, la première avec le bon id, la deuxième avec undefined .. :/

Le problème doit venir de là, mais je ne sais pas pourquoi il fait deux alertes. ^^

Edit : Non en fait j'ai compris, il me mettait undefined parce que je quittait la zone pour aller cliquer sur le bouton OK de l'alerte.
21/09/2006, 14h40
trotters213
Alors attend changement de programme : j'ai réussi à solutionner le problème en voulant régler un autre problème. Explication.
Déjà j'ai remis le code de la fonction javascript montre() comme il était au début.
Ensuite dans mon CSS, j'avais ça :
Code:

1 2 3 4 5 6 7 8 9 10 11 ... #menu { position:absolute; right:23%; top:55px; width: 100%; /* précision pour Opera */ border:none; margin: 0px; padding: 0px; list-style-type: none;} ...
Or ceci fait que si je rapetis ma fenêtre, le menu étant en position absolue se décale et ça fait très moche donc j'ai mis ça :
Code:

1 2 3 4 5 6 7 #menu { position:relative; width: 100%; /* précision pour Opera */ border:none; margin: 0px; padding: 0px; list-style-type: none;
Du coup mon menu est toujours bien placé et, Ô miracle, les sous-menus sont atteignables même sous IE.

Le souci redevient donc comme au tout début (cf sujet [XHTML]pb avec décalage et liste) j'ai mes images sous ma barre de menu qui bouge si je passe sur un menu :evilred:

J'ai trouvé. 8-)
Code:

1 2 3 4 5 function montre(id) { if (id) {setTimeout( function() { attente(id); }, 5 );} else {setTimeout( function() { attente(id); }, 5000 );} }
Et en plus avec ça t'as pas de problème d'images décalées.

21/09/2006, 15h14
trotters213
Je ne parlais pas du tout petit décalage que tu m'as fait remarqué tout à l'heure, je te parle du décalage qu'il y a quand tu réduis la fenêtre.

Par exemple ici je suis en 1280*1024 si je réduis la fenêtre, le menu "s'écrase" sur la gauche (vu que le menu est en position absolue par rapport à la fenêtre)
Code:

1 2 3 4 5 6 7 8 9 10 #menu { position:absolute; right:23%; top:55px; width: 100%; /* précision pour Opera */ border:none; margin: 0px; padding: 0px; list-style-type: none; }
cf decalage.jpg

Donc pour rémédier à ça je l'ai mis en position relative. Le problème c'est qu'il me décale toutes les images si je passe sur un menu
Code:

1 2 3 4 5 6 7 8 #menu { position:relative; width: 100%; /* précision pour Opera */ border:none; margin: 0px; padding: 0px; list-style-type: none; }
cf decelagephoto.jpg

J'ai donc trouvé la solution ultime en rajoutant à mes listes de listes clear:left et position:absolute ... presque parce que comme d'hab' sur IE il y a un problème
Code:

1 2 3 4 5 6 #menu ul li ul { display: none; clear: left; position: absolute; width: 110px; }
cf IEmegonfle.jpg

Je touche au but je le sens. Quelqu'un saurait-il m'aider ? Allez BisounoursJos après je t'embête plus ;)
21/09/2006, 15h24
Auteur

sous IE avec une résolution de 800x600 ton menu s'est fait la malle tout à gauche, il disparait de mon écran.

[edit] ton menu "programme" n'a pas de sous-menu ?
tes scripts ne servent qu'au chargement de simages ? Utilises-tu un script pour ce menu ou fais-tu tout en feuille de style ?[/edit]

:fleche: Non, non justement, dans mon dernier test, celui que tu peux voir à cette adresse http://www.mpl.ird.fr/IS/, le menu bouge pas.

:fleche: mes menus programme ainsi que projets n'ont pas de sous-menu.

Pour ce qui est du menu je le fait avec du javascript et des CSS :
javascript :

Code:

1
2
3
4
5
6
7
8
9
10
window.onload=montre;
 
function montre(id) 
{
	var d = document.getElementById(id);
		for (var i = 1; i<=10; i++) {
			if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
		}
	if (d) {d.style.display='block';}
}

HTML :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<div id="liens">
	<img name="barre" src="img_ur_vf/barre.gif" alt="" />
	<div id="menu">
		<ul>
			<li><a href="" title="Retour à l'accueil"><img name="projets" src="img_ur_vf/projets.gif" alt="" /></a></li>			
			<li onMouseOver="javascript:montre('smenu4');" onMouseOut="javascript:montre();"><img name="resultats" src="img_ur_vf/resultats.gif" alt="" />
				<ul id="smenu4">
					<li><a href="#">Sous-Menu 4.1</a></li>
					<li><a href="#">Sous-Menu 4.2</a></li>
					<li><a href="#">Sous-Menu 4.3</a></li>
				</ul>
			</li>	
			<li><a href=""><img name="programmes" src="img_ur_vf/programmes.gif" alt="" /></a></li>
			<li onMouseOver="javascript:montre('smenu2');" onMouseOut="javascript:montre();"><img name="partenaires" src="img_ur_vf/partenaires.gif" alt="" />
				<ul id="smenu2">
					<li><a href="#">Sous-Menu 2.1</a></li>
					<li><a href="#">Sous-Menu 2.2</a></li>
					<li><a href="#">Sous-Menu 2.3</a></li>
				</ul>			
			</li>	
			<li onMouseOver="javascript:montre('smenu1');" onMouseOut="javascript:montre();"><img name="equipe" src="img_ur_vf/equipe.gif" alt="" />
				<ul id="smenu1">
					<li><a href="#">Sous-Menu 1.1</a></li>
					<li><a href="#">Sous-Menu 1.2</a></li>
					<li><a href="#">Sous-Menu 1.3</a></li>
				</ul>
			</li>
		</ul>	
	</div>				
</div>

CSS :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
ul, li {
border:none;
margin: 0px;
padding: 0px;
list-style-type: none;
}
 
#menu {
position:relative;/*:absolute;*/
/*right:23%;*/
/*top:55px;*/
width: 100%; /* précision pour Opera */
border:none;
margin: 0px;
padding: 0px;
list-style-type: none;
}
 
#menu ul {
border: none;
padding: 0px;
margin: 0px;
}
 
#menu ul li {
float:right;
width: 110px;
cursor: pointer;
text-align: center;
font-weight: bold;
display: block;
margin: 1px 0px;
}
 
#menu ul li ul {
display: none;
clear: left;
position: absolute;
width: 110px;
}
 
#menu ul li ul li {
text-align: center;
background-color: #ffffff;
color:#000000;
/*rendre les menus opaques => opacity:0.8; filter:alpha(opacity=80); -moz-opacity:0.8; -khtml-opacity:0.8; Attention non conforme !!!*/	
}
 
#menu ul li ul li a {
color: #0083d7;
background-color:#ffffff;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
font-weight:normal;
text-decoration: none;
display: block;
height: 100%;
border: 1px solid #000000;
}
 
#menu ul li ul li a:hover {
color: #fff;
background-color:#0083d7;
}

21/09/2006, 15h40
Auteur

Citation:

Non, non justement, dans mon dernier test, celui que tu peux voir à cette adresse http://www.mpl.ird.fr/IS/, le menu bouge pas.

En effet.

En fait, tu as juste un problème de position des éléments sous menu
Pour Firefox, tu as un clignotement lors du passage d'un item à l'autre (mais bon ça pour l'instant c'est secondaire)
21/09/2006, 15h44
trotters213

de mon côté je ne vois pas de clignotement mais bon comme tu dis c'est vraiment secondaire.
Si ça pouvait clignoter sous IE mais être bien placé tu peux pas savoir comme je serais content :D
21/09/2006, 16h10
Auteur
j'ai modifé la feuille de style : ton float:right est la cause de tes soucis:

j'ai mis en absolute et j'ai ajouté un positonnnement à gauche (left).
Code:

1 2 3 4 5 6 7 8 9 10 11 12 #menu { position:absolute;/*:absolute;*/ left: 23%; /*right:23%;*/ top:55px; width: 100%; /* précision pour Opera */ border:none; margin: 0px; padding: 0px; list-style-type: none; }
j'ai fait un float left au lieu de right. Par contre ton menu sera orienté différemment.
Code:

1 2 3 4 5 6 7 8 9 10 #menu ul li { float:left; /*right*/ width: 110px; cursor: pointer; text-align: center; font-weight: bold; display: block; margin: 1px 0px; }
Du coup : je me demande si tu ne dois pas faire un clear right. A tester.
Code:

1 2 3 4 5 6 #menu ul li ul { display: none; /*clear: left;*/ /*necessaire, right ??*/ width: 110px; }
en basse résolution 800x600 sous IE5 et Firefox pas de souci.

Voir 40 message(s) de cette discussion en une page