Problème z-index au survol avec Firefox [résolu]

Bonjour à tous,

J'ai un soucis de z-index au survol avec Firefox sur des vignettes sur la page : http://floatingterritories.org/index2.html
Les vignettes sont entassées les unes sur les autres, et je voudrais que la vignette survolée passe à l'avant-plan. J'ai donc procédé comme suit :

/*Etat normal de la vignette*/

#projects a img {
z-index: 0;
border-color: aqua;
border-width: 10px;
border-style: solid;
}

/*Etat en survol de la vignette*/

#projects a:hover img {
z-index: 1;
border-color: white;
border-width: 10px;
border-style: solid;
}

Tout fonctionne sous Safari (3.1) mais pas sous Firefox 3...
Ai-je fait une erreur dans la CSS ?
Merci d'avance !
Modifié par jeansienkin (31 May 2008 - 13:09)

Salut jeansienkin et bienvenue ,

pour que le z-index fonctionne il faut que l'élément soit positionné. En l'occurrence il suffit de rajouter :

#projects a img  {
...
position: relative;
}

Au passage, ta page est invalide !

Peut-être qu'un petit tour dans les tutos Bases et indispensables ne serait pas inutile !

A+

Merci pour ta réponse Heyoan.

Tous les éléments sont déjà positionnés en absolu dans une <div> avec des "id" pour chacun d'eux. Comme tu l'as peut-être vu, mon layout est assez particulier...

Oui, je sais qu'elle est encore invalide, il faut que je la débugge.

jeansienkin a écrit :
Tous les éléments sont déjà positionnés en absolu dans une <div> avec des "id" pour chacun d'eux.

Oui mais les images, elles, ne sont pas positionnées.

jeansienkin a écrit :
Comme tu l'as peut-être vu, mon layout est assez particulier...

En effet !


Edit: tiens ! C'est dans la FAQ maintenant : Comment fonctionne la propriété CSS z-index ?
Modifié par Heyoan (31 May 2008 - 12:36)

Ah oui, ok ! ça marche ! merci infiniment, je m'étais complètement emmêlé les pinceaux...
Merci encore Heyoan !

You're welcome !