begin process at 2010 02 09 20:46:43
  Trouver un code source :
 
dans
 
Accueil > Forum > 

Javascript / DHTML / Ajax

 > 

CSS

 > 

Général

 > 

pb compatibilité ie/ info bulle


Derniers messages déposésPoser une question dans le forum ou lancer une discussion

pb compatibilité ie/ info bulle

mardi 3 février 2009 à 10:08:23 | pb compatibilité ie/ info bulle

elisabeth_nov

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  ******************/

mardi 3 février 2009 à 10:41:56 | Re : pb compatibilité ie/ info bulle

Bul3

Membre Club
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 <a> )
sinon : tu as mis le bon doctype ?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
ou...
Cordialement

[mon Site][M'écrire]Bul

mardi 3 février 2009 à 11:29:25 | Re : pb compatibilité ie/ info bulle

elisabeth_nov

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">
mardi 3 février 2009 à 11:41:07 | Re : pb compatibilité ie/ info bulle

Bul3

Membre Club


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

mardi 3 février 2009 à 11:47:48 | Re : pb compatibilité ie/ info bulle

elisabeth_nov

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.
mardi 3 février 2009 à 12:04:15 | Re : pb compatibilité ie/ info bulle

Bul3

Membre Club

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

mardi 3 février 2009 à 12:05:03 | Re : pb compatibilité ie/ info bulle

elisabeth_nov

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>
mardi 3 février 2009 à 12:06:10 | Re : pb compatibilité ie/ info bulle

elisabeth_nov

Mon code est loin de ne faire que 10 lignes désolée.
mardi 3 février 2009 à 12:17:33 | Re : pb compatibilité ie/ info bulle

Bul3

Membre Club


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....
        <div style="background;&nbsp&nbsp&nbsp passage en horaire: 09h45-18h00<p></p>Notes: </div></span></div>

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

mardi 3 février 2009 à 12:20:35 | Re : pb compatibilité ie/ info bulle

Bul3

Membre Club
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


1 2 3 4

Cette discussion est classée dans : ie, fonctionne, bulle, info, 10px


Répondre à ce message

Sujets en rapport avec ce message

info bulle originale qui ne fonctionne pas sous mozilla [ par pssinjaune ] Bonjour,Voilà j'ai trouver une source sur le site:http://www.javascriptfr.com/codes/BULLE-AIDE-ASSEZ-SPECIALE-VOIR_19301.aspxLa source Comment changer une info bulle texte en info bulle image ? help svp [ par westernz ] Bonjour, J'ai recuperer ce qui semble etre le meilleur code d'info bulle (sans bug de scroll ou autre). Seulement je cherche (depuis deja pas mal de Script qui fonctionne sous FF mais pas sous IE! [ par philg12 ] Bonjour à tous,Quelqu'un m'a fait ce script, mais il ne fonctionne que sur FF!Comment faire pour le rendre compatible avec IE?<script typ Info bulle avec liens [ par moimomo33 ] Bonjour,Je suis trés contant d'étre tombé sur ce code source : iciMais mon problème est que ce qui est dans l'info info bulle photo + commentaire [ par speedylol ] bonjour ;-)je suis a la recherche d'un script info bulle , qui fonction super pour ajouter a mon site web. au passage d'un gif d'appareil photo montre Bouton en style CSS qui ne fonctionne pas sous ie [ par zemele ] Bonjour, Voilà j'ai fait un bouton qui fait appel à un style : Code css : a.bouton {     color: #333333;     text-decoration: underline;     font incompatibilité... [ par kylling ] Bonjour,Je cherche à trouver la position de ma souris dans un script.Ca fonctionne bien sur IE avec event.x; et event.y;Pour Mozilla, j'ai essayé avec setAttribute fonctionne sur FireFox mais pas sur IE :( [ par kylling ] Salut,voilà une heure que je me bat pour comprendre pourquoi cette ligne fonctionne sur FireFox et non sur IE  divEnfant Info-bulle [ par mnmall ] Bonjour,MnMall<img temp_src="C:\Documents and Settings\Admin\Bureau\BullInfo.gif" src="C:%5CDocuments%20and%20Settings%5CAdmin%5CBureau%5CB Mon defilement d'images en ajax fonctionne sous IE mais pas FIREFOX [ par VBFRANCE ] Thierry


Nos sponsors


Sondage...

Comparez les prix

CalendriCode

Février 2010
LMMJVSD
1234567
891011121314
15161718192021
22232425262728

Consulter la suite du CalendriCode

 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 0,671 sec (4)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales