Forum Clubic

Menus css : problème de survol sur firefox

Bonjour,

Voilà mon problème :
J’ai créé un menu (en ligne), l’image est censée se remplacer par une autre lorsque la souris passe dessus (survol).
Avec ie 6 : pas de problème ça s’affiche correctement, mais sous firefox : rien n’apparait à l’écran.

Quelqu’un peut-il m’aider ?
Merci d’avance :slight_smile:

Un extrait de mon script css :


.news{
     display: inline;
     height: 55px;
     background: transparent url(main_menus_news_txt2.jpg)  no-repeat;
}
.news a {
     width: 104px;
     height: 100%;
     background: url(main_menus_news_txt1.jpg) no-repeat;
}
.news a:hover { /* masquage de lien.jpg au survol */
     background: transparent none;
}

.clubs {
     display: inline;
     height: 55px;
     background: transparent url(main_menus_clubs_txt2.jpg)  no-repeat;
}
.clubs a {
     width: 94px;
     height: 100%;
     background: url(main_menus_clubs_txt1.jpg) no-repeat;
}
.clubs a:hover { /* masquage de lien.jpg au survol */
     background: transparent none;
}

Edité le 17/03/2008 à 16:31

Bon ben, finalement, j’ai trouvé un moyen d’y arriver !
J’ai changé mon script par ça :

Pour être honnête, je préférais l’autre méthode, mais celle-ci à l’avantage de fonctionner :wink:


<style>
	/* Menu 2 */
	ul#menu2 {
		margin:0;
		padding:0;
		list-style-type:none;
		position: relative;
	}
	
	ul#menu2 li {
		margin:0 0 0px 0;
		padding:0;
		position: absolute;
		top: 0;
	}
	
	#itemA {
		left:0;
		width:104px;
	}

	#itemB {
		left:114px;
		width:94px;
	}
	
	ul#menu2 li a {
		display:block;
		width:114px;
		height:55px;
	}
	
	#itemA a {
		background:url('main_menus_news_txt1.jpg') no-repeat 0 0;
	}
	
	#itemA a:hover {
		background:url('main_menus_news_txt2.jpg') no-repeat 0 0;
	}
	
	#itemB a {
		background:url('main_menus_clubs_txt1.jpg') no-repeat 0px 0;
	}
	
	#itemB a:hover {
		background:url('main_menus_clubs_txt2.jpg') no-repeat 0 0;
	}
	</style>
</head>

<body>

<ul id="menu2">
	<li id="itemA"><a href="#"></a></li>
	<li id="itemB"><a href="#"></a></li>
</ul>

Edité le 17/03/2008 à 16:31

Petite correction !
Avec des images de taille différentes, il faut remplacer :


	ul#menu2 li a {
		display:block;
		width:114px;
		height:55px;
	}

Par :


	ul#menu2 li a {
		display:block;
		width:100%;
		height:55px;
	}

Voilou