survol de lien par un script ne fonctionne pas sur IE

**ConceptInterWEB** · 08/08/2013, 17h24

Bonjour,

J'ai un petit CODE CSS qui permet de faire afficher une image lorsque on survol un lien.

Ce script fonctionne super bien sous FireFox, j'ai aussi Safari sur mon PC et tout se passe bien, mais rien ne se passe sous IE.

J'ai chez moi 3 PC avec 3 versions différentes de IE soit la 8,9,10 et même résultat sur les 3. Lorsque je passe ma souris sur le lien, l'image n'apparait pas.

Je sais que probablement je vais avoir besoin d'exception pour Internet Explorer, mais mes connaissances en CSS ne sont pas assez bonnes pour comprendre ce qui ne va pas.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.auteur{
  position:relative;
}
 
.auteur span{
  position:absolute;
  left:-90px;
  top:-90px;
  display:none;
  border:1px solid #888;
  text-align:center;
  color:#FF0000;
  background-color:#000000;
  font-size:10px;
}
 
.auteur:hover span{
  display:inline;
  z-index:9000000;
}

J'ai ajouté un z-index car l'image apparaissait en dessous du lien et non par dessus.

Le lien avec le code :

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
<div class="auteur">
<a href="http://www.labougeotte.net/membres/membreprofil.php?ID=<?php echo $_SESSION['id_users']; ?>&id_profil=<?php echo $row['ID']; ?>">
<?php echo stripslashes($row['nickname']) ?> - <?php echo stripslashes($row['sexe']); ?>
<span>
<img src="http://www.labougeotte.net/images/<?php echo $photo; ?>" width="90" height="120" /><br /><?php echo stripslashes($row['prenom']); ?>
</span>
<?php if ($row['online'] == '1') { echo '&nbsp;&nbsp;<img src="http://www.labougeotte.net/img/bulle_tchat.png" width="15" height="15" border="0" />'; } ?>
</a>
</div>

Merci
Sylvain

**rodolphebrd** · 08/08/2013, 17h34

Bonjour,

merci de fournir le code HTML généré par votre navigateur et non le code PHP.

**ConceptInterWEB** · 08/08/2013, 17h59

Bonjour

Voici le code HTML pour FireFox

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
<div class="auteur">
<a href="http://www.labougeotte.net/membres/membreprofil.php?ID=1&id_profil=299">
coolmarie - Femme
<span>
<img src="http://www.labougeotte.net/images/299.jpg" width="90" height="120" />
<br />Marie-Claude
</span>
</a>
</div>

Et celui de Internet Explorer, j'ai pris un autre usager au hasard

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
<div class="auteur">
<a href="http://www.labougeotte.net/membres/membreprofil.php?ID=1&id_profil=473">
Cavalia - Femme
<span>
<img src="http://www.labougeotte.net/images/473.jpg" width="90" height="120" />
<br />Isabelle
</span>
</a>
</div>

Voilà si vous en voulez plus, je peux fournir plus, mais la page source est assez grosse en poids.

Merci
Sylvain

**NoSmoking** · 08/08/2013, 18h26

Re,
tu ne respectes pas la structure que je t'ai donné ICI, à savoir

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<div>
  <a>...</a>
  <span>...</span>
</div>

de plus le positionnement left:-90px; top:-90px; te sert à quoi?

**ConceptInterWEB** · 08/08/2013, 18h30

Hello,

Même en changeant la struture que tu m'as proposé, cela ne change rien au résultat avec IE.

Le positionnement sert à placer la photo non pas à coté du curseur, mais un peu plus à gauche et un peu plus haute tout simplement.

Voici une petite capture pour te montrer ce que ca donne

Merci
Sylvain

**Candygirl** · 08/08/2013, 23h14

Salut,

Tu as bien un doctype correctement renseigné, tout en haut de ta page, et sans BOM si encodée en UTF-8 ?

**ConceptInterWEB** · 08/08/2013, 23h49

Bonjour CandyGirl,

Tu as frappé directement au milieu de la cible, je n'en avais pas, et aussitôt que j'en ai mis un, et bien le tout s'est mis à fonctionner.

Voici ce que j'ai, c'est celui par défaut de DreamWeaver, est-ce que ca convient ou il doit être changé ?

Je n'ai pas tout mis, seulement les premières lignes.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Language" content="fr-ca" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />