bonjour,
je voudrais créer quatre zones à partir d'une image et de 4 colonnes qui se placent sous cette image. Le but recherché est que lorsqu'on passe la souris dans chacune des zones, l'image change, et que les colonnes sous l'image puissent également contenir du texte et des liens divers.
Or, avec firefox, les colonnes se situent directement sous l'image, et produisent l'effet désiré, alors que sous ie, il y a un décalage.

Voir la page http://futuretudiant.epfl.ch/page12313-fr.html

Si je travaille avec des marges négatives, c'est ok sur ie mais illisible sur firefox.

Mon code html


Ma css
#menu { width: 510px; display:block; height:480px }
#menu ul {margin:0; padding:0; list-style-type:none;}
#menu li { display: block; width: 126px; height: 470px; float: left }

#menu li.list1 { background-image: url(bt-bachelor.gif); background-repeat: no-repeat; background-attachment: scroll; background-position: 0 0 }
#menu li.list2 { background-image: url(bt-master.gif); background-repeat: no-repeat; background-attachment: scroll; background-position: 0 0 }
#menu li.list3 { background-image: url(bt-efc.gif); background-repeat: no-repeat; background-attachment: scroll; background-position: 0 0 }
#menu li.list4 { background-image: url(bt-doctorale.gif); background-repeat: no-repeat; background-attachment: scroll; background-position: 0 0 }
#menu a { display: block; padding-top: 450px; width: 126px }

#menu a#item1 { background: url(.gif) no-repeat -480px -86px }
#menu a#item2 { background: url(bt-master-on.gif) no-repeat -480px -86px }
#menu a#item3 { background: url(bt-efc-on.gif) no-repeat -480px -86px }
#menu a#item4 { background: url(bt-doctorale-on.gif) no-repeat -480px -86px }

#menu a#item1:hover { background-position: right top; z-index: 50 }
#menu a#item2:hover { background-position: right top; z-index: 50 }
#menu a#item3:hover { background-position: right top; z-index: 50 }
#menu a#item4:hover { background-position: right top; z-index: 50 }
.liensFE { background-color: #ccc; width: 121px; height: 80px; float: left; margin-right: 1px; padding: 2px; }</pre></div><!--htmlEnd-->

salut natalie

à quoi te serve tous les <br> qu'il y a :

ce sont certainement eux qui créent le décalage sous ie

a+

merci nanoun,
effectivement, c'est une gestion hasardeuse des <br> et des différentes hauteurs en pixels dans la css qui sont à l'origine du problème.
Autre question: Aurais-tu une bonne référence sur l'usage du z-index?

Merci
nm

le z-index permet de gérer l'empilement de tes éléments
les éléments ayant le z-index le plus élevé seront au premier plan

à part ca, je ne connais pas de références spécifiques pour son utilisation, cela dépend de ce que tu as besoin

a+

Si je puis me permettre,

Je te conseillerais cette référence la pour tous les styles CSS :

http://fr.selfhtml.org/css/proprietes/index.htm

Le z-index étant dedans

++

merci pour les sources, je lis sur selfhtml
"Quand vous positionnez de façon absolue plusieurs éléments dont les domaines d'affichage se superposent, les éléments sont en principe affichés l'un sur l'autre dans l'ordre dans lequel ils ont été définis."
Cela signifie-t-il que ça ne marche qu'avec des position absolue? Q'il faut impérativement activer cette caractéristique?

Merci
nm

Pourquoi chercher ailleurs ce qu'on a sous la main ^^ http://wiki.media-box.net/documentation/css