28172 sujets

CSS et mise en forme, CSS3

Problème infobulle

Bonjour,

Je réalise une infobulle sur des boutons en me basant sur le code de Raphael http://www.alsacreations.com/astuce/lire/1-comment-contrler-et-modifier-lapparence-dune-infobullenbsp.html

Mais ca ne s'affiche pas sur ie7, et j'ai bien du mal à comprendre pourquoi.


<ul class="navigation">
<li class="nav_precedent">
	<a href="http://www.juliencoenen.be/portfolio/?p=12" class="bulle" >Précédent<span>WINTEAM Châssis</span></a>
</li>
<li class="nav_suivant">
	<a href="http://www.juliencoenen.be/portfolio/?p=73" class="bulle">Job suivant<span>COLISEUM POKER TABLE</span></a></li>
</ul>




.navigation { position:relative; width: 940px; height:60px; margin:0 0 30px 15px;}
.navigation li { float:left; height:60px; width:233px; padding:0 30px; font-size:.9em;}
a.bulle { position: relative; text-decoration: none; }
a.bulle span { display: none; }
a.bulle:hover { background: none; /* correction d'un bug IE */ z-index: 1000; }
.navigation li.nav_precedent { position:absolute; top:0; left:px;}
.navigation li.nav_retour { position:absolute; top:0; left:323px; text-align:center;}
.navigation li.nav_suivant { position:absolute; top:0; right:0; text-align:right;}
.navigation li a { display:block; line-height:60px; font-size:15px; letter-spacing:0px; font-style:italic; color:#E0A8C8;}
.navigation li a:hover { border:0px;}
.navigation li a.bulle:hover span { display: block; position: absolute; bottom:-25px; height:40px; line-height:55px; color:#2A232C; padding:0 10px; font-size:11px;}
.navigation li.nav_precedent a.bulle:hover span { left:0px; background: url(img/previous_bulled.png) no-repeat top left; }
.navigation li.nav_suivant a.bulle:hover span { right:0px; background: url(img/next_bulled.png) no-repeat top right; }


Ca donne ceci en live (sur firefox ^^): http://www.juliencoenen.be/portfolio/?p=93
Si quelqu'un a une idée n'hésitez pas parce que je ne sais plus ou chercher.

Merci d'avance
Modifié par pee-wee (26 Apr 2010 - 13:42)
Plop,

Petit up parce que je n'arrive tjrs pas à trouver.
J'ai vérifier sur ie8 et ca fonctionne sans problème. Il n'y a que ie7 qui dérange.

Merci
Pee-wee
Coucou

Bon alors après quelques essais, moi c'est pareil je ne vois pas trop pourquoi ça ne fonctionne pas, mais j'ai trouvé une solution, qui ne doit vraiment pas être la meilleure mais bon ça fonctionne, à toi de voir ...


a.bulle span { display: block; position: absolute; left:-10000px; height:40px; line-height:55px; color:#2A232C; padding:0 10px; font-size:11px; background-color: white; }
.navigation li a.bulle:hover span {  bottom:-25px; left:0; }


J'ai modifié ces deux lignes de ton CSS style.css
Sujet clos
Aller à