Hover qui marche sous IE et pas sous FF...

Auteur
Damien C	# 08 Feb 2010 - 20:43:34
3 Posts	Bonjour, je n'ai pas trouve de sujet qui traite de ce problème. (pardonnez-moi les problemes d'accents, je suis sous qwerty) Mon objectif est de creer un menu qui s'affiche au passage de la souris grace a la fonction hover. Ca marche nickel avec IE... et ca plante avec FF (un comble!). Je cherche depuis longtemps, j'ai passe mon HTML au validateur W3c, rien n'y fait... Ci dessous, HTML puis CSS. <div class="headline"> <div class="menu-mission"> <a href="missions.html"><img src="aboutus_w.jpg" alt="About Us" title="About Us" height="20" width="100" onmouseover="this.src='aboutus-b.jpg'" onmouseout="this.src='aboutus_w.jpg'"> </a> <div class="menu-mission-content" > <a href="missions.html"><p id="menu-mission-mission">Mission</a></p><a href="missions.html"><p id="menu-mission-area">Area of Expertise</a></p></div> </div> </div> <div class="content"> <img class="imagehome" sc="image_home.jpg" alt="images home sustainable Urbanism International" title="sustainable urbanism international Home" height="440" width="845"/> </div> CSS: .menu-mission { background-color:#7f7f7f; position: relative; width: 100px; height:20px; left:-165px;} } .menu-mission:hover .menu-mission-content { background-color:#7f7f7f; color:black; overflow: hidden; display: block; } .menu-mission-content { position:relative; display:none; width:200px; height:300px; position:relative; left:-165px; top: 0px; } .menu-mission-content:hover { position:relative; display: block ; width:200px; height:300px; position:relative; left:-165px; top: 0px;} Ca serait vraiment bien si qqn avait un coup de main a me donner. Je travaille pour : www.sustainurban.org (une ONG.) Modifié par Damien C (08 Feb 2010 - 21:47)
3 Posts
fvsch	# 08 Feb 2010 - 20:54:56
Administrateur 19941 Posts	Damien C a écrit : et ca plante avec FF (un comble!) C'est peut-être lié au fait que ton code est pas du tout du tout valide? Damien C a écrit : j'ai passe mon HTML au validateur W3c, rien n'y fait... Attention, le validateur c'est pas une machine à laver. Il suffit pas de tester son code pour qu'il s'améliore, il faut aussi corriger les erreurs signalées. C’est ça, la puissance intellectuelle. Bac + 2, les enfants.
Administrateur 19941 Posts
Damien C	# 08 Feb 2010 - 21:20:59
3 Posts	Le probleme ne vient pas de la, avec un code comme celui la par exemple (code original en fait, sans erreur sur http://validator.w3.org/check (sauf 4 : une text="align" que je n'ai pas reussit a mettre ailleurs, 1 erreurs qui viennent du code de la barre de recherche google, ligne 52, et un code source d'image que j'ai sabote le temps de faire la page. Bref, rien qui touche de pres ou de loin a mon probleme...) code HTML complet original : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="EN"> <head><meta name="verify-v1" http-equiv="refresh" content="text/html" /> <link rel="stylesheet" media="screen" type="text/css" title="stylesui" href="testmenucss.css" /> <link rel="shortcut icon" type="image/x-icon" href="logosui_up.jpg" /> <title>Sustainable Urbanism Press</title> <script type="text/javascript"> </script> <script type="text/javascript"> </script> </head> <body> <div class="page" align="center" > <div class="headline"> <div class="menu-mission"> <a href="missions.html"><img src="aboutus_w.jpg" alt="About Us" title="About Us" height="20" width="100" onmouseover="this.src='aboutus-b.jpg'" onmouseout="this.src='aboutus_w.jpg'"/> </a> <ul class="menu-mission-content" > <li id="menu-mission-mission"><a href="missions.html">Mission</a></li> <li id="menu-mission-area"><a href="missions.html">Area of Expertise</a></li></ul> </div> </div> <div class="content"> <img class="imagehome" sc="image_home.jpg" alt="images home sustainable Urbanism International" title="sustainable urbanism international Home" height="440" width="845"/> </div> </div> <div> <form action="http://www.google.com/cse" id="cse-search-box"> <p id="researchbar"> <input type="hidden" name="cx" value="007500223576040116382:5hhbd3pj9s8" /> <input type="hidden" name="ie" value="UTF-8" /> <input type="text" name="q" size="31" /> <input type="submit" name="sa" value="Search" /> </p> </form> <script type="text/javascript" src="http://www.google.com/cse/brand?form=cse-search-box&lang=en"></script> </div> </body> </html> J'ai le meme resultat. PS code edite, pardon pour l'oubli. Merci du rappel, j'etais distrait. Modifié par Damien C (08 Feb 2010 - 21:50)
3 Posts
Heyoan	# 08 Feb 2010 - 21:33:14
Modérateur 8101 Posts	Hello Damien C et bienvenue sur le forum , en tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace). Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle. D'ailleurs, je rappelle que l'Aide (dont le lien est fourni lors de l'inscription) contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc. Éléments html, hiérarchie XHTML 1.0 Strict et propriétés CSS
Modérateur 8101 Posts
Damien C	# 09 Feb 2010 - 22:02:38
3 Posts	Deux jours de bataille sans résultat. Ca me surprend que ca marche sur IE... en fait ca m'inquiète plus qu'autre chose... Bien a vous messieurs, merci d'avance pour le conseil!
3 Posts
fvsch	# 10 Feb 2010 - 13:39:28
Administrateur 19941 Posts	Damien C a écrit : Le probleme ne vient pas de la Vraiment? J'aurais pensé qu'avec test <p> et <a> mal imbriqués, ça aurait pu poser problème. Mais ce n'est peut-être pas le cas ici. Pour le reste, sans accès au CSS complet (et, dans l'idéal, à la page en ligne), j'ai du mal à en dire plus. Modifié par Florent V. (10 Feb 2010 - 13:40) C’est ça, la puissance intellectuelle. Bac + 2, les enfants.
Administrateur 19941 Posts