28172 sujets

CSS et mise en forme, CSS3

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

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)
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. Smiley cligne
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. Smiley smile
Modifié par Damien C (08 Feb 2010 - 21:50)
Hello Damien C et bienvenue sur le forum Smiley smile ,

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).

upload/1-code.gif

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle. Smiley cligne

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.
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! Smiley smile
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)
Sujet clos
Aller à