IE et Firefox: Frères ennemis pour un menu déroulant

Répondre


Cette question est un moyen d’empêcher des soumissions automatisées de formulaires par des robots.
Smileys
:D :) :( :o :shock: :? 8-) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen: =D> #-o =P~ :^o :non: :priere: 8-|
Voir plus de smileys
  Revue du sujet
 

  Étendre la vue Revue du sujet : IE et Firefox: Frères ennemis pour un menu déroulant

par Neomcdn » 28 août 2007, 09:00

C'était neomcdn!!!!

@+!

par Invité » 28 août 2007, 08:59

Nous avons trouvé notre problème.

Les animations flash posaient problème avec les div en relative. On a mis tout ça en absolute et maintenant ça a l'air de fonctionner normalement (sélection de l'ensemble du sous-menu est possible). Je ne pensais que flash pouvait interférer là-dessus; mais quand des éléments se chevauchent...

@+!

Bon courage à tous!

PS: Merci @rthur pour le point info!

par @rthur » 27 août 2007, 09:10

YUI = Yahoo! User Interface Library
http://developer.yahoo.com/yui/

par Invité » 27 août 2007, 09:02

YUI?

@+

par momox » 26 août 2007, 00:05

Je n'ai pas réussi a résoudre, donc j'ai utilisé YUI :D

par Neomcdn » 25 août 2007, 10:55

Et tu as réussi à résoudre çà?

Si je vois sur quel élément des CSS tu as travaillé, ça pourrait m'aider!

@+!

par momox » 25 août 2007, 00:10

Marrant moi j'avais l'inverse, ca se fermait sous IE :D

IE et Firefox: Frères ennemis pour un menu déroulant

par Neomcdn » 24 août 2007, 17:10

Bonjour à tous,

Je vous soumets un de mes problèmes pour savoir si quelqu'un y a déjà été confronté. Le SAV de Alsacréations semble en vacances... :) !

Je viens de créer un menu déroulant en HTML, javascript et CSS, à partir des tutos de Alsacréations, et j'ai un problème de fermeture intempestive de mon sous-menu avec Firefox, tandisqu'il n'ya pas de problème avec IE.

J'ai une div menu, dans laquelle, on a 6 entités, dont une a des sous-entités. Au passage de la souris sur l'entité, les sous-entités s'affichent.

- Au survol de ces entités sous IE, pas de problème (si ce n'est que le display: block semble ne pas fonctionner, car le survol n'est pas actif en dehors du texte de l'entité: un passage sur le fond d'une sous-entité, fait se refermer les sous-entités)

- Au survol de la 3ème entité sous FF, le navigateur quitte les sous-entités: les 7 autres liens ne sont donc pas accessibles.

Voici le code CSS

Code : Tout sélectionner

dl, dt, dd, ul, li { margin: 0; padding: 0; font: bold 11px arial; list-style-type: none; } #menu { position: absolute; margin: 1px 0 0 801px; width: 192px; } #menu dl { float: left; width: 93px; margin: 0; } #menu dt { cursor: pointer; height: 24px; text-align: center; background: #33FF00; margin: 0; line-height : 24px; display: block; } #menu dd { border: 1px solid gray; margin: 0; background: #000099; } #menu li { text-align: center; display:block; } #menu dt a { font-family: arial, helvetica, sans serif; text-decoration: none; height: 100%; border: 0 none; display: block; color: #FFFFFF; } #menu li a { background: #CCFF33; font-family: arial, helvetica, sans serif; text-decoration: none; display: block; height: 100%; border: 0 none; color: #000; } #menu li a:hover { background: #1ACB00; color: #FFFFFF; } #menu dt :hover { background: #FFFF99; padding: 0; margin: 0; }
et le code HTML et js:

Code : Tout sélectionner

<div id="menu"><dl> <dt onmouseover="javascript:montre();"><a href="http://www.google.fr" title="Présentation">Présentation</a></dt> </dl> <dl> <dt onmouseover="javascript:montre();"><a href="http://www.google.fr" title="Promotions">Promotions</a></dt> </dl> <dl> <dt onmouseover="javascript:montre();"><a href="http://www.google.fr" title="Catalogues">Catalogues</a></dt> </dl> <dl> <dt onmouseover="javascript:montre();"><a href="http://www.google.fr" title="Liens">Liens</a></dt> </dl> <dl> <dt onmouseover="javascript:montre();"><a href="http://www.google.fr" title="http://www.google.fr">Contacts</a></dt> </dl> <dl> <dt onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre('');"><a href="#" title="Les produits et services de l'armurerie Audureau">Produits</a></dt> <dd id="smenu1" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre('');"> <ul> <li><a href="armes-a-feu.php">Armes à feu</a></li> <li><a href="cartouches-balles.php">Cartouches et balles</a></li> <li><a href="armes-blanches.php">Armes blanches</a></li> <li><a href="archerie.php">Archerie</a></li> <li><a href="loisirs.php">Loisirs</a></li> <li><a href="vetements-accessoires.php">Vêtements et accessoires</a></li> <li><a href="reparation-renovation.php">Réparation et rénovation</a></li> <li><a href="securite.php">Sécurité</a></li> <li><a href="detecteurs.php">Détecteurs</a></li> <li><a href="trophees-cadeaux.php">Trophées et cadeaux</a></li> </ul> </dd></dl> </div>
Merci d'avoir parcouru ce long message! En espérant que quelqu'un puisse me donner une piste pour effectuer les modifications nécessaires, car mes recherches et surtout mes tests sur le code n'ont servi à rien.

Cordialement,

Neomcdn