Logo GNT
Actualités Tests & Guides Bons Plans
Twitter iPhone pliant OnePlus 11 PS5 Disney+ Orange Livebox Windows 11
Entraide Développement Développement Langage PHP Comportement étrange de IE

Comportement étrange de IE

9 réponses
Avatar
CrazyCat
Bonjour,

Sur le site de mon réseau IRC, j'ai fait un petit système de sous-menu.
Le principe est de créer des blocs "<ul></ul>" avec des ids différents,
et un simple javascript me permet de les afficher au survol.

Etonnament avec IE (6 et 7), les sous menus 1 et 2 fonctionnent très
bien, le 3ème s'affiche mais les liens ne sont pas fonctionnels (idem
pour les suivants).
J'ai testé en intervertissant les ids de menu2 et menu3, et encore le
bloc "menu2" fonctionne bien, pas le bloc "menu3".

Sous firefox, pas le moindre soucis...

Vous pouvez regarder à http://www.zeolia.net.

Le javascript:
function show(id) {
allMenu = document.getElementById('smenu');
allLi = allMenu.getElementsByTagName("ul");
for (i=0;i<allLi.length;i++) {
allLi[i].style.display = 'none';
}
if (id!=0) document.getElementById('menu'+id).style.display = 'block';
}
function hide() {
setTimeout("show(0)", 1000);
}

La source du menu:

<div id="menu">
<ul>
<li><a href="/" title="Accueil"
onmouseover="javascript:show(1);">zeolia.net</a></li>
<li><a href="/guides/" title="Guides IRC"
onmouseover="javascript:show(2);">Guides IRC</a></li>
<li><a href="/webmasters/" title="Outils pour webmasters"
onmouseover="javascript:show(3);">Webmasters</a></li>
<li><a href="/canaux/" title="Les canaux"
onmouseover="javascript:show(4);">Canaux</a></li>
<li><a href="/denora/?m=u" title="Les utilisateurs"
onmouseover="javascript:show(5);">Utilisateurs</a></li>
</ul>
</div>
<div id="smenu">
<ul id="menu1">
<li>&raquo;&nbsp;<a href="/">Pr&eacute;sentation</a></li>
</ul>
<ul id="menu2">
<li>&raquo;&nbsp;<a href="/guides/debuter.html">D&eacute;buter
sur IRC</a></li>
<li>&raquo;&nbsp;<a href="/guides/avancees.html">Commandes
avanc&eacute;es</a></li>
<li>&raquo;&nbsp;<a href="/guides/anope.html">Services</a></li>
<li>&raquo;&nbsp;<a href="/guides/eggdrops.html">Eggdrops</a></li>
</ul>
<ul id="menu3">
<li>&raquo;&nbsp;<a href="/webmasters/applet.html">Installer un
tchat</a></li>
<li>&raquo;&nbsp;<a
href="/webmasters/stats.html">Statistiques</a></li>
</ul>
<ul id="menu4">
<li>&nbsp;</li>
</ul>
<ul id="menu5">
<li>&nbsp;</li>
</ul>
</div>

Merci à ceux qui pourront me donner une piste :)

--
Réseau IRC Francophone: http://www.zeolia.net
Aide et astuces webmasters : http://www.c-p-f.org
Communauté Francophone sur les Eggdrops: http://www.eggdrop.fr
Signaler un problème avec ce contenu

9 réponses

Supprimer
Cette action est irreversible, confirmez la suppression du commentaire ?
Signaler le commentaire

Veuillez sélectionner un problème

Nudité
Violence
Harcèlement
Fraude
Vente illégale
Discours haineux
Terrorisme
Autre
Avatar
Olivier Miakinen
Le 18/02/2008 15:10, CrazyCat a écrit :

Sur le site de mon réseau IRC, j'ai fait un petit système de sous-menu.
Le principe est de créer des blocs "<ul></ul>" avec des ids différents,
et un simple javascript me permet de les afficher au survol.

Etonnament avec IE (6 et 7), les sous menus 1 et 2 fonctionnent très
bien, le 3ème s'affiche mais les liens ne sont pas fonctionnels (idem
pour les suivants).
J'ai testé en intervertissant les ids de menu2 et menu3, et encore le
bloc "menu2" fonctionne bien, pas le bloc "menu3".

Sous firefox, pas le moindre souci[]...



Que ce soit sous IE ou SeaMonkey, avec une résolution raisonnable il y a
quand même un souci pour accéder aux sous-menus des menus « zeolia.net »
et « Guides IRC », car il faut faire un gros détour pour ne pas survoler
l'un des menus « Webmasters », « Canaux » ou « Utilisateurs » qui se
trouvent à la ligne suivante. C'est d'autant plus dommage quand on songe
qu'à part ça le design est parfaitement élastique.

Pour info, voici les dimensions de ma fenêtre au moment où j'ai voulu
faire l'essai :
Window width: 735px
Window height: 948px
Viewport width: 725px
Viewport height:775px

Vous pouvez regarder à http://www.zeolia.net.

[...]

Merci à ceux qui pourront me donner une piste :)



Cela dit, je constate effectivement le problème de liens non cliquables.
Je n'ai pas d'idée pour le moment.
Avatar
William Marie
"CrazyCat" a écrit dans le message de news:
47b992ea$0$21145$
Bonjour,

Sur le site de mon réseau IRC, j'ai fait un petit système de
sous-menu. Le principe est de créer des blocs "<ul></ul>" avec des
ids différents, et un simple javascript me permet de les afficher au
survol.
Etonnament avec IE (6 et 7), les sous menus 1 et 2 fonctionnent très
bien, le 3ème s'affiche mais les liens ne sont pas fonctionnels (idem
pour les suivants).
J'ai testé en intervertissant les ids de menu2 et menu3, et encore le
bloc "menu2" fonctionne bien, pas le bloc "menu3".

Sous firefox, pas le moindre soucis...



Et sous Opera c'est bon aussi. Constaté le même défaut sous IE7. Pas
pigé. Mais je suis passablement ignare en javascript.

A part ça rien à redire, le site est très propre. Même pas de pub ! Mais
je rêve ! Du coup je le mets dans mon calepin.
--
=================================== William Marie
Attention antiSpam remplacer trapellun.invalid
par free.fr
Web : http://wmarie.free.fr
http://www.pandemonium.dnsalias.org (site expérimental)
====================================
Avatar
CrazyCat
William Marie wrote:
Et sous Opera c'est bon aussi. Constaté le même défaut sous IE7. Pas
pigé. Mais je suis passablement ignare en javascript.



Ce n'est -à priori- pas un soucis javascript car le JS ne sert qu'à
masquer/afficher les sous-menus. A moins qu'il y ait un étrange effet de
bord, sinon je ne vois pas. Mais je continue à chercher.

A part ça rien à redire, le site est très propre. Même pas de pub ! Mais
je rêve ! Du coup je le mets dans mon calepin.



Merci pour ces compliments :)

--
Réseau IRC Francophone: http://www.zeolia.net
Aide et astuces webmasters : http://www.c-p-f.org
Communauté Francophone sur les Eggdrops: http://www.eggdrop.fr
Avatar
CrazyCat
Olivier Miakinen wrote:
Que ce soit sous IE ou SeaMonkey, avec une résolution raisonnable il y a
quand même un souci pour accéder aux sous-menus des menus « zeolia.net »
et « Guides IRC », car il faut faire un gros détour pour ne pas survoler
l'un des menus « Webmasters », « Canaux » ou « Utilisateurs » qui se
trouvent à la ligne suivante. C'est d'autant plus dommage quand on songe
qu'à part ça le design est parfaitement élastique.



En effet, le site est "propre" à partir de 995px de large, je devrais
surement ajouter un système de contrainte (IE ne comprenant pas le
min-width).

Cela dit, je constate effectivement le problème de liens non cliquables.
Je n'ai pas d'idée pour le moment.



Si je te disais depuis combien de temps je n'ai plus d'idées à ce sujet :D

--
Réseau IRC Francophone: http://www.zeolia.net
Aide et astuces webmasters : http://www.c-p-f.org
Communauté Francophone sur les Eggdrops: http://www.eggdrop.fr
Avatar
SAM
CrazyCat a écrit :
Bonjour,

Sur le site de mon réseau IRC, j'ai fait un petit système de sous-menu.
Le principe est de créer des blocs "<ul></ul>" avec des ids différents,
et un simple javascript me permet de les afficher au survol.

Etonnament avec IE (6 et 7), les sous menus 1 et 2 fonctionnent très
bien, le 3ème s'affiche mais les liens ne sont pas fonctionnels (idem
pour les suivants).



Les IE sont très paresseux ... !

J'ai testé en intervertissant les ids de menu2 et menu3, et encore le
bloc "menu2" fonctionne bien, pas le bloc "menu3".

Sous firefox, pas le moindre soucis...

Vous pouvez regarder à http://www.zeolia.net.



J'ai pas IE et ... oui ça fonctionne

Pour le blème d'IE j'essaierai avec des visibility:hidden plutot que des
display:none;

#smenu ul {
visibility: hidden;
position: absolute;
padding: 0 0 0.5em 0.5em;
}


Le javascript:



Penser à garder les variables dans la fonction (et ne pas les rendre
globales) afin d'éviter les fuites de mémoire chez IE.

function show(id) {
var allMenu = document.getElementById('smenu');
var allLi = allMenu.getElementsByTagName("ul");
for (i=0;i<allLi.length;i++) {
allLi[i].style.visibility = 'hidden';
}
if (id!=0)
document.getElementById('menu'+id).style.visibility = 'visible';
}

Sera bien assez compliqué à faire gérer par un IE ;-)
Sinon pour lui simplifier encore plus la vie, passer par une class ?

La source du menu:

<div id="menu">
<ul>
<li><a href="/" title="Accueil"
onmouseover="javascript:show(1);">zeolia.net</a></li>



C'est le xhtml qui oblige à préciser javascript ?

<div id="menu">
<ul>
<li><a href="/" title="Accueil"
onmouseover="show(1);">zeolia.net</a></li>

Merci à ceux qui pourront me donner une piste :)




Tout le monde s'en fout mais mon IE Mac lance bien les liens des
sous-menus (une fois qu'on lui a dit de poursuivre malgré le JS qui ne
lui plait pas).

Safari 2 s'en sort bien.

--
sm
Avatar
CrazyCat
Ne rigolez pas, c'était un soucis... de CSS.
J'ai supprimé les "position: relative;" appliqués aux blocs de sous-menu
et ça semble tourner.
Je n'ai plus qu'à vérifier que c'est resté proprement en place :)


--
Réseau IRC Francophone: http://www.zeolia.net
Aide et astuces webmasters : http://www.c-p-f.org
Communauté Francophone sur les Eggdrops: http://www.eggdrop.fr
Avatar
SAM
CrazyCat a écrit :
Ne rigolez pas, c'était un soucis... de CSS.
J'ai supprimé les "position: relative;" appliqués aux blocs de sous-menu



Mais kesk'cé que c'bazar ?

C'est documenté qque part ?


--
sm
Avatar
Yamo'
Salut,
CrazyCat tapotait le Mon, 18 Feb 2008 15:10:42 +0100, ce message
<47b992ea$0$21145$ :


Vous pouvez regarder à http://www.zeolia.net.



Je te conseillerai d'utiliser ce menu :
http://dosimple.ch/articles/Menus-dynamiques/

C'est interressant de développer ses propres codes mais reprendre
un code qui fonctionne sans soucis c'est des fois reposant :)

--
Stéphane
http://yamodivin.free.fr/


--
Stéphane
http://yamo.beurdin.org
Avatar
William Marie
"SAM" a écrit dans le
message de news: 47b9bc4b$0$891$
CrazyCat a écrit :
Ne rigolez pas, c'était un soucis... de CSS.
J'ai supprimé les "position: relative;" appliqués aux blocs de
sous-menu



Mais kesk'cé que c'bazar ?

C'est documenté qque part ?



Il est vrai que IE 7 (pas seulement 6) a des fois des interprétations un peu
personnelles des marges CSS, mais là, annuler l'activité d'un lien, je
n'avais pas vu ça.
--
=================================== William Marie
Attention antiSpam remplacer trapellun.invalid
par free.fr
Web : http://wmarie.free.fr
http://www.pandemonium.dnsalias.org (site expérimental)
====================================