Probleme IE6 avec affichage d'un paragraphe en rollover

Bonjour à tous,

Voici mon code HTML :

<span>vin blanc<p>Cliquer pour découvrir le vin blanc</p></span>

Et ma CSS :

/* GESTION DE L'AFFICHAGE DE DEFINITION EN BAS A DROITE */
span {
text-decoration: none; /* définition du span qui affichera le "calque" */
cursor:pointer;
}

span:hover {
	text-decoration: none; /* définition du span qui affichera le "calque" */
}

span p { /* définition de la balise <p> inclue dans <span> */
display: none;
margin: 0;
padding:0;
}

span:hover p { /* définition de la balise <span> au survol */
display: inline;
position: absolute;
top: 375px; /* positions et dimensions du calque, que vous pouvez changer à loisir */
right: 275px;
width: 120px;
height: 80px;
text-align:justify;
color:black;
}

Voila, le contenu de <p> devrait s'afficher à l'endroit voulu lorsque la souris passe sur le <span> mais voila, sous MF et IE7 c'est niquel et sous IE6 rien ne s'affiche nulepart. Quelqu'un à une idée? parceque moi la....

Bon en fait c'est bon :
En partie grâce à ca :
http://css.alsacreations.com/Tutoriels-et-articles-divers/Afficher-Masquer-des-calques-sans-javascript[/url]

Et aux remarques d'un inscrit dont le pseudo m'échape.

Bon j'envoie le code fonctionnel :
HTML :

<a href='#' onclick="creeAjax('principal','lien1.html');">vin blanc<span>Cliquer pour d&eacute;couvrir le vin blanc</span></a>

(toujours la premiere partie sans importance)

Et css :

/* GESTION DE L'AFFICHAGE DE DEFINITION EN BAS A DROITE */
a {
text-decoration: none; /* définition du lien qui affichera le "calque" */
}
a:hover {
background: none; /* correction d'un bug IE */
}
a span { /* définition de la balise <span> inclue dans <a> */
display: none;
}

a:hover span { /* définition de la balise <span> au survol */
display: inline;
position: absolute;
top: 375px; /* positions et dimensions du calque, que vous pouvez changer à loisir */
right: 275px;
width: 120px;
height: 80px;
text-align:justify;
color:black;
}

Tester MF, IE6, IE7.

il faut mettre un fond à ta balise a dans ta feuille de style...

a:hover {
background: none;
}



oupsss j'avais pas vu que la réponse été deja au dessu..
Modifié par bio-azar (11 May 2007 - 19:04)