Problème avec une superposition d'image

Bonjour !
Voila, j'ai un petit problème avec une superposition d'image, j'ai repris la méthode du livre de Raphael: CSS 2 afin de faire afficher une infobulle personnalisée au survol d'une "case" mais le problème est que sous internet explorer, le lien présent sous l'infobulle apparait dans celle-ci, par transparence ... Mais plutot qu'une longue explication: voici le probleme en question: Ici (uniquement sous IE, sous firefox: ça marche très bien )
J'ai essayé en réglant le z-index: mais cela ne change rien ...
Voici le fragment de css utile:

/* Planning */

#plan_main {
     width: 545px;
     height: 130px;
     text-align: center;
     font-weight: bold;
     margin-left: 17px;
}
.plan_semaine {
     width: 71px;
     float: left;
     background: url("design/back_plan_semaine.gif");
     border: 1px solid black;
     margin: 2px;
     margin-bottom: 10px;
}
.plan_calendar {
     width: 71px;
     float: left;
     border: 1px solid black;
     margin: 2px;
}
.plan_empty {
     width: 71px;
     float: left;
     border: 1px solid #D0D3D8;
     margin: 2px;
}
.plan_event_asso {
     width: 71px;
     float: left;
     border: 1px solid black;
     background: url("design/back_plan_event_asso.gif");
     margin: 2px;
}
a.info {
     display: block;
     width: 71px;
     position: relative;
     text-decoration: none;
     color: #252525;
}
a.info span {
     display: none;
}
a.info:hover {
     background: none;
     z-index: 500;
}
a.info:hover span {
     display: inline;
     width: 100%;
     border: 1px solid black;
     position: absolute;
     z-index: 500;
     top: 2em;
     left: 2em;
     background: gray;
     text-align: center;
     color: white;
     padding: 0.2em;
}

Merci d'avance à tous ceux qui pourront m'aider
Modifié par Lapinoo Sama (15 Jan 2006 - 15:26)

Pas pu tester, je n'ai pas IE (linux oblige...), désolé.

Sinon, l'association a l'air sympa, et le site est pas mal !
Remarques en passant (même si c'était pas demandé ) :
- le site est en ISO-8859-1... l'utilisation d'unicode (utf-8) permettrait l'utilisation de caractères nippons, non ? Enfin, ce n'est pas forcément un besoin.
- pourquoi une pub qui s'affiche à l'ouverture de la page, quand on est hébergé sur un espace Free ?
- pas pu voir la pop-up...
- IMPORTANT : les liens du menu se décallent vers la droite lorsqu'on passe dessus. C'est sans doute voulu, mais ça peut occasioner des problèmes : effet visuel dérangeant, lien qui devient trop long et qui passe sur deux ligne au lieu d'une, bousculant tout le menu à sa suite (argh...). C'est une question purement esthétique, mais je serais d'avis de ne pas utiliser des changements dans les marges et padding, ou de changement de fonte, corps de caractère ou graisse, au survol de la souris. Les changements de couleur de texte, de couleur ou d'image de fond, ou de décoration du texte (soulignement) me semblent suffir à indiquer qu'il y a une possibilité d'interactivité (lien).

Toujours personne ?

up

encore un up

Salut,

je viens d'aller voir ton site. Peut être qu'avec un peu d'effort je pourrais me repérer dans ton code source et t'aider mais excuse moi tout cela est tellement fouilli (que de de <div>) que je suis complètement perdu.

Un conseil (très général je le concède et pas directement en rapport avec ta question) : essaye de revoir l'utilisation des class en allégeant tout ça avec le principe de la cascade.

Mais bon, c'est peut être moi qui suit un peu trop endodo... ...ormi.

Sinon une remarque : sur cette page > http://bretagnejapon.free.fr/actu_annee.php

Comment quelqu'un qui n'est pas rennais peut il savoir à quelle ville les adresses mentionnées se réfèrent ?
Modifié par clb56 (29 Jan 2006 - 03:21)

bonjour,
rapidement et sans te donner la soluce, le probleme vient de

position: relative;

appliqué a la balise a.info

a plus
Modifié par gcyrillus (29 Jan 2006 - 18:38)

bonjour,
je pensais que avec ce probleme de position" relative " inutilisable sous IE dans ton contexte, et cette multitude de"div" que tu te serai tourné vers la solution de lui appliqué un autre positionnement( avec les commentaires conditionnels par exemple) ou que tu prendrais l'option de faire ton calendrier a l'aide d'un tableau ...

Perso, je n'utilise jamais les position:absolute pour construire une page (je ne suis pas a l'aise avec) et je me tourne vers les flottant.

Néanmoins voici une soluce a essayer, en commentaires conditionnels:

<!--[if IE]>
<style type="text/css">
a.info {
display:inline;/* du coup notre position relative n'interfere plus */
}
a.info:hover {
left:auto;/* pour remettre a sa place */
}
a.info:hover span {
     left: 0em;
}
/*on repasse le cadre et ses enfants  au dessus du menu de droite */
#main {
z-index:1;}
#menu {
	z-index:0;
}
</style>
<![endif]-->

<question >
? heu pour les z-index 0 et 1 reagissent comme-çi tu met 400 et 500, ou bien est ce necessaire ? Je vois souvent des valeurs "importantes " utilisées et je ne comprends pas bien un tel choix ...</question >

a plus

Merci pour cette réponse, finalement je vais effectivement opter pour le positionnement des informations dans un cadre annexe, et refaire mon calendrier soit en tableau, soit en liste, afin qu'il soit sémantiquement correct
Pour la question du z-index, j'ai mis ces valeurs élevées pour la même raison que tu évoques: c'est toujours ce que je vois Je n'ai pas cherché à me renseigner d'avantage ...
Pour ce qui est du positionnement absolu, je le trouve personnellement bien plus pratique pour les effets graphiques que je veux obtenir et un résultat semblable et sans trop d'encombres selon les différents navigateurs et les différentes résolutions ... Peut être qu'avec css3 et / ou une nouvelle version de IE je pourrais réessayer mes designs en relatifs ( bien plus pratiques et permettent d'avoir des pages extensibles )
Encore merci à tous