Lien non fonctionnel sur IE et chrome

Bonjour
site: http://www.jesuiscapable.ca

Voici les 4 div impliqués:

#entete {
width: 58em;
margin: 0;
padding-top: 1em;
z-index: 1;
overflow: visible;

}
#entete a.accueil { display: block; width: 67%; }
#entete a.accueil img.spip_logos {
line-height: 1em;
margin-top: -40px;
display: block;
#entete .joindre a{
background-color: #FFF;
font-size: 1.1em;
font-weight: bold;
color: #333333;
display: block;
height: 20px;
width: 12%;
padding-left: 1em;
padding-right: 1em;
margin-top: 1em;
margin-left: 2em;
border: 1px inset;
z-index: 100;
}

2 de ces div contiennent un lien:
<div id="entete">
<div class="joindre"><a href="spip.php?article9">Nous joindre</a></div>
<a rel="start home" href="#URL_SITE_SPIP/" title="<:accueil_site:>" class="accueil">[(#LOGO_SITE_SPIP|image_reduire{770,200}) ]</a>
#MENU_LANG
</div>

Le tout se comporte très bien sous firefox.
Le lien pour nous joindre n'est pas fonctionnel avec IE et CHROME.

Que faire?
Merci

RP

Hello

Tu as un souci de z-index, la propriété ne fonctionne QUE sur des éléments positionnés (donc relatif, ou absolue).
Ton image est "par dessus" ton lien, du coup, quand tu passes sur ton lien, tu passes en fait sur l'image. Ça m'explique pas pourquoi firefox n'a aucun souci pourtant, mais bon ^^

Ce qu'il faut faire :

1. ajouter un positionnement à " #entete .joindre a " pour que le z-index de 100 fonctionne :

#entete .joindre a{
position:relative;
z-index:100;
....
}

2. ajouter un z-index moins élevé pour que ton "#entete a.accueil img.spip_logos" passe sous le lien :

#entete a.accueil img.spip_logos {
  display:block;
  line-height:1em;
  margin-top:-40px;
  position:relative;
  z-index:2;
}

Modifié par InpIxelItrust (25 Sep 2011 - 11:57)