Pb compatibilité ie/ info bulle [Résolu]

Signaler
Messages postés
103
Date d'inscription
jeudi 2 mars 2006
Statut
Membre
Dernière intervention
4 février 2009
-
Messages postés
4933
Date d'inscription
samedi 1 juillet 2006
Statut
Membre
Dernière intervention
2 février 2015
-
Bonjour,
j'ai créer un planning, chaque case de mon planning peut contenir une image ou une couleur issue de ma base mysql (par requete php), sur chaque case, il y a la possibilité d'afficher une info bulle au passage de la souris. tout fonctionne sauf mon info bulle qui apparait transparente. l'info bulle apparait derrière la couleur ou l'image dans la case. cela fonctionne sous firefox mais pas sous ie. je precise que mon info bulle est faite en css, que j'utilise le php pour les requètes et du javascript pour l'affichage du planning et des cases.
J'ai essayer diverses solutions que j'ai trouver sur se site mais aucune ne fonctionne. Pourriez vous m'aider?

Voici le code css utilisé:
/***************  Gestion des infos bulles  ******************/

.calEvent span {
z-index: 1001;
display: none;}

.calEvent:hover {
background: none;
z-index: 40;
cursor: help;}

.calEvent:hover span {
display: inline;
position: fixed; /*  relative ne fonctionne pas inherit non plus, absolute  static */
overflow: visible;
white-space: nowrap;
z-index: 1001;
visibility: visible;
margin-top: 20px;
margin-left: 10px;
background: rgb(255,255,204);/* correspond à #F5F5DC; */
/* background-image: url('/SRC-APRI/images/2325865367_13993ccdc7.jpg'); */
color: green;
padding: 3px;
border: 2px solid black;
border-radius: 10px 10px;
-moz-border-radius: 10px;}

/***************  Fin Gestion des infos bulles  ******************/

33 réponses

Messages postés
4933
Date d'inscription
samedi 1 juillet 2006
Statut
Membre
Dernière intervention
2 février 2015
8
nickel si ça baigne
pour les erreurs css/html IE7 et précédents sont pour
le moins légers, au niveau signalement.
[mon Site][M'écrire]Bul
Messages postés
4933
Date d'inscription
samedi 1 juillet 2006
Statut
Membre
Dernière intervention
2 février 2015
8
bonjour,

quelle version IE ?
avant IE7, il y aura peut-être du css mal traité
et il faudra ajouter du javascript, mais faut voir
( hover par exemple est seulement géré sur les balises mon Site][M'écrire]Bul
Messages postés
103
Date d'inscription
jeudi 2 mars 2006
Statut
Membre
Dernière intervention
4 février 2009

j'utilise ie 7 quand au doctype j'ai mis celui-ci
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Messages postés
4933
Date d'inscription
samedi 1 juillet 2006
Statut
Membre
Dernière intervention
2 février 2015
8
alors à priori, pas de raisons, ça doit baigner.

tu peux nous mettre UN TOUT PETIT EXTRAIT
avec l'élément qui a class="colEvent"...
mais le minimum, et surtout pas le PHP !
la page html résultante ( sinon, on sera
quasi incapable de deviner ce que ça
génère )... quelques lignes html quoi...

je ferais bien ( quoique ? ), mais ça risque de ne
pas correspondre à donc ça ne résoudrait rien

[mon Site][M'écrire]Bul
Messages postés
103
Date d'inscription
jeudi 2 mars 2006
Statut
Membre
Dernière intervention
4 février 2009

Mon code ne comprend que du php et un peu de javascript pour l'affichage du planning et de l'info bulle donc pour un apercu ca risque d'etre dur si tu ne veux que du html.
Messages postés
4933
Date d'inscription
samedi 1 juillet 2006
Statut
Membre
Dernière intervention
2 février 2015
8
ah bon ? et le php ne crée pas de html ?
ben alors, il ne peut pas fonctionner sur un micro coté client. ;o))

tu lances ton machin, une page s'affiche : c'est du html,
tu fais alors affichage / Code Sources, tu sauvegardes vers un fichier,
ou Fichiers / Enregistrer sous
    puis tu en fais l'extrait nécessaire
    tu testes pour voir si cet extrait nous permet de pouvoir t'aider
    et si c'est ok : les 10 lignes tu nous les postes ici

[mon Site][M'écrire]Bul
Messages postés
103
Date d'inscription
jeudi 2 mars 2006
Statut
Membre
Dernière intervention
4 février 2009

Voici ce qui est générer pour une case de mon planning, si ca peut aider:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS: apparition d'infobulles - Développement web</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<SCRIPT language="javascript">
function PosBulle(IdDiv) {
if(document.getElementById('PositionBulle'+IdDiv)){
/*document.getElementById('PositionBulle'+IdDiv).style.top = '100px';
document.getElementById('PositionBulle'+IdDiv).style.display = 'inline';
document.getElementById('PositionBulle'+IdDiv).style.position = 'fixed';
document.getElementById('PositionBulle'+IdDiv).style.overflow = 'visible';
document.getElementById('PositionBulle'+IdDiv).style.white-space = 'nowrap';
document.getElementById('PositionBulle'+IdDiv).style.z-index = '90';
document.getElementById('PositionBulle'+IdDiv).style.visibility = 'visible';
document.getElementById('PositionBulle'+IdDiv).style.top = '20px';
document.getElementById('PositionBulle'+IdDiv).style.left = '40px';
document.getElementById('PositionBulle'+IdDiv).style.background = 'rgb(255,255,204)';
document.getElementById('PositionBulle'+IdDiv).style.color = 'green';
document.getElementById('PositionBulle'+IdDiv).style.padding = '3px';
document.getElementById('PositionBulle'+IdDiv).style.border = '2px solid black';
document.getElementById('PositionBulle'+IdDiv).style.border-radius = '10px 10px';
document.getElementById('PositionBulle'+IdDiv).style.-moz-border-radius = '10px';*/
/*document.getElementById('PositionBulle'+IdDiv).style.display = 'inline';*/
}
}
</SCRIPT>

</head>
<body>

<div class="calEvent" style="height:30px; top:60px; border-color: #808080;" onclick="OpenCommentaires("");" onmouseover="PosBulle(19521);" >
<div class="calEventHeaderSmall" ><img src="/SRC-APRI/images/users.jpeg" title="Réunion Equipe" style="margin-left: 1px;" />
<div class="calEventIcons"><img src="/SRC-APRI/images/mega-icone-056.jpeg" title="Commentaire"/></div></div>
<div class="calEventBodySmall">
<table align="left" width="100%" cellpadding="0" border="0" cellspacing="0">
<tr width="100%"><td align="center" width="auto"></td></tr></table></div>
<span id="PositionBulle19521" >
<div style="background: rgb(204,255,204); text-align: center; ">Commentaires:</div><br><div>Evènement: Horaire changé pour raison service<br>&nbsp&nbsp&nbsp&nbsp passage en horaire: 09h45-18h00<p></p>Notes: </div></span></div>
</body>

</html>
Messages postés
103
Date d'inscription
jeudi 2 mars 2006
Statut
Membre
Dernière intervention
4 février 2009

Mon code est loin de ne faire que 10 lignes désolée.
Messages postés
4933
Date d'inscription
samedi 1 juillet 2006
Statut
Membre
Dernière intervention
2 février 2015
8
je ne comprend pas....
tu fais soit disant une info-bulle en css et
    en fait... c'est que du javascript !?!?

    onmouseover="PosBulle(19521);"
    ça va faire double emploi avec le css ! ça va se mordre la queue...
    quoique... dans PosBulle, tout est en commentaires ?

et....
       

t'as pas l'impression
qu'il manque une ch'tiote " là ?
que &nbsp; irait mieux ?

bref faut d'abord rectifier les erreurs html
( et probablement simplifier ce nombre de div+span+.... 
  mais bon, on verra après  )

[mon Site][M'écrire]Bul
Messages postés
4933
Date d'inscription
samedi 1 juillet 2006
Statut
Membre
Dernière intervention
2 février 2015
8
j'ai ( très très vaguement  !!) testé

en sucrant purement et simplement le javascript,
en rectifiant les erreurs html...
bah.. ça prend forme et il ne doit pas manquer grand chose
pour que ça baigne comme tu l'entend.

[mon Site][M'écrire]Bul
Messages postés
103
Date d'inscription
jeudi 2 mars 2006
Statut
Membre
Dernière intervention
4 février 2009

dans posbulle, tout est en commentaire et dans

ou est le probleme? je  suis stupide ok, mais la je saisi pas?
Messages postés
4933
Date d'inscription
samedi 1 juillet 2006
Statut
Membre
Dernière intervention
2 février 2015
8
je ne parle même pas, pour l'instant du css
dans la balise <style> + celle dans la balise de l'élément...
       
<tbody><tr><td>[mon Site][M'écrire]Bul</td></tr></tbody></table>
Messages postés
103
Date d'inscription
jeudi 2 mars 2006
Statut
Membre
Dernière intervention
4 février 2009

peut me mettre ton test que je saisisse parce que là, je suis paumée!!
Messages postés
4933
Date d'inscription
samedi 1 juillet 2006
Statut
Membre
Dernière intervention
2 février 2015
8
ben... tu as un style="..... sans " de fermeture
et ce n'est pas &nbsp mais &nbsp;

le moindre éditeur avec coloration syntaxique te le montre,
FireFox dans sa console d'erreurs probablement aussi ( et IE8 je suppute )
...

[mon Site][M'écrire]Bul
Messages postés
4933
Date d'inscription
samedi 1 juillet 2006
Statut
Membre
Dernière intervention
2 février 2015
8
               
style="background:#000000;">
                    &nbsp;&nbsp;&nbsp; passage en horaire: 09h45-18h00

Notes:

et franchement : simplifie le reste !!!

[mon Site][M'écrire]Bul
Messages postés
4933
Date d'inscription
samedi 1 juillet 2006
Statut
Membre
Dernière intervention
2 février 2015
8
d'ailleurs je n'ai pas testé avec FF puisque tu disais
que ça baignait.. mais j'ai un très très gros doute !
ou alors tu ne regardes pas les erreurs...
à propos :
Navigateurs |Quelques Expplications |----
Chrome
, contrôler page actuelle / Options pour développeurs
/ Console Javascript, ----
FireFox
, Outils / Console d'erreurs
et mieux : télécharger mon Site][M'écrire]Bul
Messages postés
103
Date d'inscription
jeudi 2 mars 2006
Statut
Membre
Dernière intervention
4 février 2009

sous firefox cela fonctionne a la perfection mais pas sous ie, le problème que j'ai  (je sais pas si ca sera plus clair) c'est que mon planning se divise en deux: matin et aprem se qui correspond chacun à un div, si je met un commentaire le matin (info bulle) quand je passe la souris, la partie de l'info bulle qui devrai etre sur le div aprem ne s'affiche pas, elle est transparente et je ne comprend pas pourquoi puisque le reste fonctionne (mieux depuis que j'ai suivi tes modifications d'ailleurs, merci ^^)
Messages postés
4933
Date d'inscription
samedi 1 juillet 2006
Statut
Membre
Dernière intervention
2 février 2015
8
pas avec ce que tu nous donnes !
il est vrai que FF ne fait que noter les erreurs et qu'il faut aller les lire. mais bon :

c'est sûr, FF donne une erreur !
maintenant, tu rectifies ou pas, c'est comme tu le sens,
mais sans ces modifs, ça ne sert à rien d'aller plus loin
et si tu les as fait.. ben donnes nous le résultat

[mon Site][M'écrire]Bul
Messages postés
103
Date d'inscription
jeudi 2 mars 2006
Statut
Membre
Dernière intervention
4 février 2009

Firefox ne m'as pas donnée d'erreur, les modif sont faite mais le problème n'est pas résolus, je continue de chercher parce que je pense que c'est un problème de div ou de z index, donc merci de t'être penché sur le problème. De tout manière, il n'y a qu'en cherchant que je trouverai, en attendant mon planning tourne sous firefox donc c'est pas l'urgence (mais au final, il doit fonctionner avec ie7, c'est pour ça que je galère), donc je continue et je vais surtout revoir mon code complet pour dénicher toute mes petites erreurs. Merci à toi pour toute ton aide.
Messages postés
4933
Date d'inscription
samedi 1 juillet 2006
Statut
Membre
Dernière intervention
2 février 2015
8
>>les modif sont faite mais le problème n'est pas résolus,
aucun doute : il te reste des erreurs
( si les z-index fonctionnent avec FF, ça fonctionne avec IE )
[mon Site][M'écrire]Bul