Zones réactives incompatibles avec IE

Salut,

J'ai beau tout essayer : je ne comprends pas, ça ne marche pas.
http://www.thegoldfishes.com/musicians (pas taper, le "design" est pas de moi )

Sous Firefox c'est parfait, mais sous IE : la cata.
Les cadres blancs me servent justent à localiser l'emplacement des calques quand je lance des captures sous IE (ben oui, je suis sous Linux et donc j'ai pas moyen de tester en direct mes modifs (ça aide pas, c'est vrai )).

Sous IE c'est tout décalé, j'ai essayé aussi le positionnement uniquement en relatif, mais c'est pas mieux que les marges...

Quelqu'un a-t-il le moindre soupçon d'idée ?

Merci
Loupilo.

Personne n'a d'idée ?

J'ai beau tout essayer, seul l'intensité du décalage varie

Merci,
Loupilo.

Pourquoi utiliser la propriété float sur tes liens, s'ils sont positionnés de manière relative ?

Car sur ce tuto (http://css.alsacreations.com/Tutoriels-et-articles-divers/Faire-une-zone-reactive-image-map-en-CSS), j'ai lu :

a écrit :
Attention toutefois : si vous souhaitez placer deux balises de bloc (zones) l'une à côté de l'autre, il faudra penser aux positonnements flottants (float), absolus ou relatifs, car les balises blocs vont à la ligne par défaut.

Faut pas ?

Bonjour,

Au lieu d'utiliser les propriétés margin-left et margin-top, utilise left et top directement, pou positionner tes liens.

Cordialement,

J'avais déjà essayé... Le problème est le même

Bonsoir,

Il est vrai que le positionnement flottant est très tentant mais il faut faire attention quand on l'utilise.

Il ne s'agit pas là d'un bug d'internet explorer mais d'une mauvaise utilisation des styles. Après si les navigateurs interprètent de manière différentes les contre-sens de la css, ce n'est pas de leur faute...

Bon, voici la partie de ta css qui t'empêche de faire ce que tu veux :

a {
text-decoration:none;
display:block;
position:relative;
}

La ligne "position:relative;" ne te sert à rien ici vu qu'elle est par défaut à la valeur "relative" (et que tu ne la définis pas avec la valeur "absolute" plus haut dans la css), je l'enlève donc.

Ensuitre vient la ligne "display:block;", la fameuse ligne qui te cause tant de soucis !! Et oui, c'est elle ! Supprime la, tu verras ça marchera impeccablement !

a {
text-decoration:none;
}

Mais pourquoi ??

Et bien la réponse n'est pas compliquée : Les balises de type "block" sont positionnées les unes en dessous des autres et tes balises lien étant de type "block" (vu que tu leur disais d'en être) se poussaient les unes les autres. En plus, comme tes balises lien n'apparaissent pas dans ton code html dans le même ordre que le stipule ta css, la navigateurs étaient paumés... Ils ont interprété comme ils ont pu...

Après avoir fais la modif, il faut modifier le style du lien qui a l'id home et le mettre comme les autres... je pense que tu faisais un test...

Je reste à ta disposition, si besoin est.

A bientôt,

Djé

Super !

Effectivement, après quelques aménagements, ça marche, selon browsercam !!

Quelqu'un pour confirmer ?

Vraiment, merci Dje

Loupilo.