18073 sujets

Questions générales et questions de débutants

[RESOLU]Bug Menu rollover IE mais pas Mozilla/Firefox

Bonjour,

J'ai repris le tutorial faire "un menu rollover avec une seule image de fond",
J'ai un gros pb le menu que j'ai réalisé marche très bien sur IE, mais sur Mozilla les rollovers ne marchent plus,

à quoi est ce du ?

voici le code




<!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="fr" lang="fr">
<head>
<title>espace ludique</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--

body {
background: #28a9b9;
}

#haut{
background-color:none; position:absolute; width:1296px; height:70px; z-index:1; left: 5px; top: 3px;
}

ul#menuh{	/* utilisation de liste pour le menu */
padding-right: 0px;
padding-left: 0px; 
padding-bottom: 0px;
margin: 0px;
padding-top: 0px;
list-style-type: none;	/* suppression des puces de liste */
margin:0;
padding:0;
}

ul#menuh li {
float: left;
padding-right: 0px;
padding-left: 0px;
padding-bottom: 0px;
margin: 0px; padding-top: 0px;
list-style-type: none;
}


ul#menuh {
	background: url(images/menu_rollover5.gif) no-repeat left top; /* arrière-plan général du menu */
	left: 2px; 
	width: 934px;
	height:70px;
	position: absolute; /* positionnement pour ie5 et ie5.5 */
	top: 8px; 
	text-align: right;
	}

li {float: left;}

ul#menuh li a {	/* dimensions et définitions des boutons */
display: block;	/* mise en block de <a> pour lui donner des dimensions */
height: 70px;
width: 233px;
line-height: 50px;
font-family: arial, serif;
/*font-size: 14px;
line-height: 50px;	/* hauteur de ligne pour éviter les paddings */
text-decoration: none;
}

ul#menuh li a:hover {
background:  url(images/menu_rollover5.gif) no-repeat left right top;
}
ul#menuh a#menu1:hover {
background-position: -934px 0%;	/* décalage de l'arrière-plan pour chaque bouton */
}
ul#menuh a#menu2:hover {
background-position: -1167px 0%;
}
ul#menuh a#menu3:hover {
background-position: -1400px 0%;
}
ul#menuh a#menu4:hover {
background-position: -1633px 0%;
}
</style>
</head>

<body>
<div id="haut" >
<ul id="menuh">
	<li><a id=menu1 title=activit  href="http://"></a> </li>
  <li><a id=menu2 title=autour  href="http://"></a> </li>
  <li><a id=menu3 title=clique   href="http://"></a> </li>
 <li><a id=menu4 title=par  href="http://"></a> </li> 

	
</ul>
</div>


</body>
</html>



ci joint un lien pour télécharger le fichier qui bug sous mozilla
http://mickael.upload.free.fr/test_mozilla.zip
Modifié par jaenani (21 Jul 2005 - 14:18)
c bon g trouvé,


ul#menuh a#menu1:hover {
background-position: -934px 0%; /* décalage de l'arrière-plan pour chaque bouton */


il fallait remplacer a#menu1 par a#menuh1

Sujet clos
Aller à