28220 sujets

CSS et mise en forme, CSS3

P:first-letter et infobulles personalisé

Bonjours a tous,

voilla j'ai une petit probleme de comptabilité entre IE6 et Mozilla, pour une fois IE affiche correctement et c'est Mozilla qui n'affiche pas comme il faudrais.

Cela concerne l'application d'une infobulle personalisé dans un paraphe qui porte la balise "first-letter"...
En fait mozila enleve l'application du first-letter au passage de l'endroit ou l'infobulle devrait s'activé..


Je vais vous présenter le petit bout de code si dessou:



[b]Le code CSS[/b]

[i]/* Premiere lettre du paraphe */[/i]
p:first-letter {
 color: red;
 font-size: 24px
}

[i]/* Infobulles personalisé*/[/i]
a.info {
 position: absolute;
 text-decoration: none;
 color: black;
 border-bottom: 1px dotted gray;
}
a.info span {
 display: none;
}
a.info:hover {
 background: none;
 z-index: 500;
}
a.info:hover span {
 display: inline:
 position: absolute;
 z-index: 500;
 top: 2em;
 left: 1em;
 background: green;
 text-align: center;
 color: white;
 padding: 0.2em;
}

==============================

[b]Le code HTML[/b]

<p>Survolez le mot 
<a class="info" href="#">"Alsace"<span>Région francaise 
capitale de la choucroute</span></a>
pour voir les infobulles des explications.
</p>


Pourquoi cela ne fonctione pas correctement sous Mozila ?
Pourtant sous IE6 cela s'applique correctement..

N.B...désolé de ne pas avoir mis en ligne un exemple mais je suis en "vacances"..et la je me trouve dans un cyber-cafe Smiley langue

Soit,..je reviendrait voir demain pour d'effentuel réponse..

Merci d'avance !

++
Modifié par ghijselinck (13 Oct 2005 - 13:29)
Essaye comme ceci :
[b]CSS[/b]
/* Infobulles personalisé*/
a.info {
 /*position: absolute;*/
 text-decoration: none;
 color: black;
 border-bottom: 1px dotted gray;
}
a.info span {
 display: none;
}
a.info:hover {
 background: none;
 z-index: 500;
}
a.info:hover span {
 display: inline;
 position: absolute;
 z-index: 500;
 top: 2em;
 left: 1em;
 background: green;
 text-align: center;
 color: white;
 padding: 0.2em;
 width:auto;
}
[b]HTML[/b]
<p>Survolez le mot 
<a class="info" href="#">"Alsace"<span>Région francaise capitale de la choucroute</span></a>
pour voir les infobulles des explications.</p>


Pour la lettrine, je te conseille la méthode exposée ici
Modifié par yyoupla (15 Nov 2005 - 22:16)
oui ben c'est la seule solution qui me reste pour que ce soit compatible avec IE et FF...

Pourtant dans le livre de Raphael (css2 pratique du design web) il y a un exercice a faire ou l'ont demande d'affciher des lettrine et dans le meme paraphe aussi une infobulle... le bug est justement la, sous IE ca marche niquel mais FF foire...


Soit..peut etre corriger cela dans le livre de raphael aussi non ?
Ou peut etre le signalez ?


aller, je vous laisse..
bien a vous tous et a tres bientot ! Smiley cligne
Sujet clos
Aller à