[resolu] La zone de click d'une image lien réduite avec firefox

Bonjour,

J'ai un problème sur mon site http://www.webdesign-tutoriaux.com

Les 2 drapeaux dans le menu horizontal permettent de changer la langue du site. Le problème est que le lien est clickable seulement sur une toute petite partie de l'image. Je ne comprend pas pourquoi toute l'image n'est pas clickable comme pour toutes les autres icônes de mon site ... la zone de click est ok sous ie et opéra mais pas sous firefox.

Sinon j'ai essayé en supprimant l'attribut "alt" mais rien et en augmentant la taille de l'image la zone clickable augmente aussi mais ça ne prend toujours pas ensemble.

J'ai aussi essayer de changer l'extension de .gif vers .png mais rien ne change

voici le code css associé à cette partie :

#flags{
        position:absolute;
        margin-left:auto;
        margin-right:auto;
        width:70px;
        height:16px;

		z-index:3;
        background-image: none;
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 12px;
        left: 710px;
        top: 147px;
        text-align: right;

}

et le code dans la page :

	<div id="flags">
		<a href="http://www.webdesign-tutoriaux.com'.$_SERVER['REQUEST_URI'].'"> 
		<img src="http://www.webdesign-tutoriaux.com/images/flags/fr.gif" border="0px" height="11px" width="16px"/></a>
		<a href="http://en.webdesign-tutoriaux.com'.$_SERVER['REQUEST_URI'].'"> 
		<img src="http://www.webdesign-tutoriaux.com/images/flags/en.gif" border="0px" height="11px" width="16px"/></a>
	</div>

Merci de votre aide
Modifié par beal2912 (14 May 2007 - 07:59)

Salut,

Ces propriétés

        margin-left:auto;margin-right:auto;

ne sont pas compatibles avec position: absolute. Regarde peut être par là
Modifié par ghost (13 May 2007 - 22:50)

Non mais c'est toujours ça de nettoyer dans ma css merci

Re,

#flags a{
        display: block;
        width:16px;
        height:11px;
}

Bonjour,

En parcourant le code de la page :

div#menu_horizontal {
	position: absolute;
	z-index: 3;
}
#flags {
	position: absolute;
	z-index: 3;
}

Étant placés sur le même plan, les deux éléments sont placés en hauteur en fonction de leur place dans le code HTML. div#menu_horizontal est donc par dessus. La partie des liens non cliquable correspond à la partie recouverte par div#menu_horizontal.

Correctif :

#flags {
	position: absolute;
	z-index: 4;
}

Merci c'etait effectivement le z-index, Je pensais qu'il y aurait eu un problème d'affichage si cet attribut était en cause...

Merci à toi aussi Ghost
Modifié par beal2912 (14 May 2007 - 07:59)