Help box qui ne marchent pas sous IE

[destroyedlolo]

Salut,

j'ai mis en place un systeme de bulle d'aide basee sur cette page.

Comme je ne souhaite pas etre oblige de creer des liens partout des que je veux rajouter une aide, j'ai modifier le CSS comme suit :

/* based on http://psacake.com/web/jl.asp */

.hlp{
    position:relative; /*this is the key*/
    z-index:24;}

.hlp:hover{z-index:25;}

.hlp span{display: none}

.hlp:hover span{ /*the span will display just on :hover state*/
    display:block;
    position:absolute;
    top:1.2em; left:1em; width:15em;
    border:1px solid #0cf;
    background-color:#cff; color:#000;
    text-align: center
	font-size: small;
}

et j'ai mis dans ma page des codes du genre

<span class=hlp><img src='/images/smilley/police_stop.gif' class=text onclick='affiche("zone_admin");'><span>Afficher ou cacher la <i>zone Administrateur</i></span></span>

Ca marche tres bien avec FireFox mais les bulles ne s'affichent pas avec M$IE6

Quelqu'un saurait-il se qu'il me faut modifier pour que ca fonctionne aussi ?

Merci et A+

Laurent

[kot]

Mauvaise nouvelle,

tout ce que je peux dire, c'est que ça fonctionne super mal sur Safari

[destroyedlolo]

Mauvaise nouvelle,

tout ce que je peux dire, c'est que ça fonctionne super mal sur Safari  

<{POST_SNAPBACK}>

Est-ce que ca fonctionne avec le site que je donne en reference ?

Quant tu dis que ca fonctionne mal ... il se passe quoi ?

De mon cote, avec M$IE ou avec NS7 ... les bulles ne s'affichent pas

J'ai toujours la possibilite de le faire en Javascript mais je trouve que c'est un peu lourd dingue ...

[TheRec]

Si tu décide d'utiliser Javascript, je ne peux que te conseiller Nice titles, cela reste accessible en utilisant cette méthode, que Javascript soit activé au non et que la gestion DOM soit correcte ou non...car l'attribut title reste disponible dans les deux cas.

Maintenant si tu veux une solution en CSS pur, qui fonctionne sous Safari / IE5.5/6.0 / Firefox 1.x voici un tutorial... il y a quelques petits bugs, mais à première vu cela semble correcte et adaptable.

[kot]

Quand je dis que cela ne fonctionne pas, c'est que le menu surgissant de "This is a tooltip" est tronqué, je n'en vois que le moitié gauche.

Alors que les autres ne surgissent pas du tout.

Edit: oublié de préciser que c'est le lien que tu as donné ("cette page") qui ne fonctionne pas.

Modifié 26 Avril 2006 par kot

[NorSeb]

Bonjour,

Chez moi (Win XP SP2) ca marche parfaitement sous IE et FireFox...

[destroyedlolo]

Bonjour,

Chez moi (Win XP SP2) ca marche parfaitement sous IE et FireFox...

<{POST_SNAPBACK}>

Avec mon code ou avec l'URL que j'ai donnee ?

D'apres ce que j'ai lu dans le tutorial (merci TheRec ), il semblerait que ca marchouille avec M$IE uniquement si l'on change le font et surtout sur les <a> ...

Bon, clairement une solution Javascript semble poser probleme a TinyMCE que j'utilise pour enrichire mes texts area ...

[jeanpierre949]

popur que ca fonctionne sur IE sans .js tu ajotes cette regle

a.hlp:hover {
background: none;
z-index: 500;
}

oups pas fait gaffe tu veux pas de balise <a>

et pourtant c'est la seule qui fasse hover sur IE donc sans a pas de hover sans js

Modifié 27 Avril 2006 par jeanpierre949

[destroyedlolo]

Bon, apres tout, ce n'est que pour des bulles d'aides.

J'ai donc bien reflechi ... ca va devenir lourd dingue ci je dois encore rajouter une grosse dose de JS pour avoir la compatibilite

Bref, je pense que :

• je vais me focaliser sur les pages visiteurs pour qu'elles fonctionnent a l'identiques quelques soit le navigateur
  
• pour les pages d'admin, je vais m'assurer que leur fonctionnent basic est correcte quelque soit le navigateur mais j'ajouterai des goodies pour les navigateurs civilises et j'indiquerai clairement que ca ne fonctionne a 100% qu'avec un vrais navigateur.
  

Ainsi, je conserverai un minimum d'accessibilite mais j'aurai un fonctionnement plus qu'ameliore pour mes clients qui seront passer a qq chose de plus moderne.

M'enfin, je vais essayer