Bon. Histoire de poursuivre le test j'ai ajouté une tooltip sur chaque carte. Et là, le drame. Les deux précédentes étaient sur la même colonne, et j'aurais dû me douter que ce n'était pas pertinent. Parce que du coup, la quatrième tooltip (sur la quatrième carte, la bleue) se superpose à la troisième (verte), et pareil entre la deuxième et la première... Sous Firefox uniquement, d'ailleurs (pour une fois), car sous IE c'est nickel.
Oh pardon, j'avais commencé à tester mais sans donner les résultats encore. Donc ok, je vois avec les données que tu me proposes et j'affinerai.
Mais le point positif c'est que ça marche =) ! (oui, IE7 est illogique...)
Avant c'était en haut à droite, et tu as mis pour l'instant :
<!--[if gt IE 6]>
<style type="text/css">
a.tooltip:hover em {
margin-top: 0px;
margin-left: -340px;
}
</style>
Et je ne comprends plus le fonctionnement de IE 7, c'est relativement illogique.
J'essaierai volontiers:
margin-top: 12px;
margin-left: -318px;
8-)
Cela fait du bien de prendre un peu de recul... On retrouve plus rapidement ses bêtises.
Code donc ton thème ainsi
$themeconf = array(
'template' => 'yoga',
'theme' => 'griffon',
'template_dir' => 'template/yoga',
'icon_dir' => PHPWG_ROOT_PATH.'template/yoga/theme/griffon/icon',
'admin_icon_dir' => PHPWG_ROOT_PATH.'template/yoga/theme/griffon/icon/admin',
'mime_icon_dir' => PHPWG_ROOT_PATH.'template/yoga/icon/mimetypes/',
'local_head' => '<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="'.PHPWG_ROOT_PATH.'template/yoga/theme/griffon/fix-ie5-ie6.css">
<![endif]-->
<!--[if gt IE 6]>
<style type="text/css">
a.tooltip:hover em {
margin-top: 472px;
margin-left: -350px;
}
</style>
<![endif]-->'
);
Si cela ne marche pas, tu essaieras top et left.
8-)
Je me permets de remonter le sujet =) les pauvres utilisateurs de IE vont criser (si tant est qu'il y en ait qui regardent mes cartes)
Hélas... pas de changement... (juste comme ça, pour rigoler, j'ai testé avec top: -472px; et left: 350px; rien de changé non plus, le fichier s'applique-t-il bien ?)(et, oui, je fais Ctrl+F5 ^^)
Au lieu de:
margin-top: 472px;
margin-left: -350px;
tu codes
top: 472px;
left: -350px;
8-)
J'ai IE7 moi aussi, et je crois bien que ça ne marche pas =( les infobulles sont toujours en vrille en haut à droite.
Qu'as-tu fait exactement ? Tu précises au site que sous IE il doit donner une certaine position aux infobulles, de façon prioritaire à la CSS ? D'où vient que [if gt IE 6] soit reconnu, et comment ? (est-ce que j'ai encore beaucoup de questions =D ?)
J'imagine que le Hack sera ainsi:
<!--[if gt IE 6]> <style type="text/css"> margin-top: 472px; margin-left: -350px; </style> <![endif]-->
if gt IE 6 : peut-être même 5, je n'ai que de l'IE 7 sous la main. Donc, je ne sais pas quelles sont les versions de IE qui présentent ce défaut.
Je ne sais pas si cela va fonctionner, je ne peux tester.
Alors comment le placer... Ton thème griffon est inspiré de montblanc.
Dans ton themeconf.inc.php tu devrais avoir quelque chose comme:
$themeconf = array( 'template' => 'yoga', 'theme' => 'griffon', 'template_dir' => 'template/yoga', 'icon_dir' => PHPWG_ROOT_PATH.'template/yoga/theme/griffon/icon', 'admin_icon_dir' => PHPWG_ROOT_PATH.'template/yoga/theme/griffon/icon/admin', 'mime_icon_dir' => PHPWG_ROOT_PATH.'template/yoga/icon/mimetypes/', 'local_head' => '<!--[if lt IE 7]> <link rel="stylesheet" type="text/css" href="'.PHPWG_ROOT_PATH.'template/yoga/theme/griffon/fix-ie5-ie6.css"> <![endif]-->' );
Et nous allons le remplacer par:
$themeconf = array( 'template' => 'yoga', 'theme' => 'griffon', 'template_dir' => 'template/yoga', 'icon_dir' => PHPWG_ROOT_PATH.'template/yoga/theme/griffon/icon', 'admin_icon_dir' => PHPWG_ROOT_PATH.'template/yoga/theme/griffon/icon/admin', 'mime_icon_dir' => PHPWG_ROOT_PATH.'template/yoga/icon/mimetypes/', 'local_head' => '<!--[if lt IE 7]> <link rel="stylesheet" type="text/css" href="'.PHPWG_ROOT_PATH.'template/yoga/theme/griffon/fix-ie5-ie6.css"> <![endif]--> <!--[if gt IE 6]> <style type="text/css"> margin-top: 472px; margin-left: -350px; </style> <![endif]-->' );
Pour info, les anciennes techniques de Hack de css à base de "* html" sont à éviter.
8-)
AkaiKen a écrit:
Pour la parse error... la ligne 205 en question :
Code:
/* ----Menu----- */Je ne comprends pas en quoi c'est une erreur =( ; il peut y avoir des espaces ou non entre /* et */ alors je ne vois pas...
Sinon, IE part de plus en plus fou avec ce code =D l'infobulle file en haut à droite.
Je suis désolée de te laisser tout faire, VDigital, parce que là je suis larguée...
Moi, tout va bien, je ne suis pas largué.
http://jigsaw.w3.org/css-validator/vali … mp;lang=fr
Et ça:
.nb-comments { color: #f92; } }
C'est un rêve... 8-)
Tu dis "l'infobulle file en haut à droite." Je m'attendais à en haut à gauche...
Mais c'est vu. Et je suis ravi de la chose car maintenant je peux hacker.
Je regarde cet aprèm.
8-)
Pour la parse error... la ligne 205 en question :
/* ----Menu----- */
Je ne comprends pas en quoi c'est une erreur =( ; il peut y avoir des espaces ou non entre /* et */ alors je ne vois pas...
Sinon, IE part de plus en plus fou avec ce code =D l'infobulle file en haut à droite.
Je suis désolée de te laisser tout faire, VDigital, parce que là je suis larguée...
URI : http://akaiken.free.fr/site/template/yo … /theme.css
205 Parse error - Unrecognized }
Et... (Je ne sais pas comment IE va se comporter):
/*tooltips pour funcards*/ a.tooltip em { display:none; } /*a.tooltip:hover { border: 0; position: relative; z-index: 500; text-decoration:none; }*/ a.tooltip:hover em { font-style: normal; display: block; position: absolute; margin-top: -460px; margin-left: 30px; /* top: 135px; left: 16px; */ padding: 5px; color: #000; border: 1px solid #bbb; background: #fffcd4; width:292px; height:427px; } a.tooltip:hover em span { position: absolute; top: -7px; left: 15px; height: 7px; width: 11px; background: transparent url(image-infobulle.gif); margin:0; padding: 0; border: 0; } /* fin tooltips pour funcards*/
Normal... Attends que je trouve la suite.
8-)
Ca marche bien, en ce sens que l'infobulle se positionne au même endroit pour FF et IE... mais aussi quelle que soit la carte ! Je compte mettre une infobulle descriptive sur chaque carte. Pour l'instant il y a en a deux, une sur Ginko (première carte) et une sur Récolte douloureuse ; et en supprimant la partie a.tooltip:hover la bulle se fixe sur Ginko...
En dernier ressort, on te donnera le "Hack" pour IE qui ira bien...
Mais si je peux éviter.
8-)
Essaie pour voir de modifier ton theme.css
Remplace ceci:
a.tooltip:hover { border:0pt none; position:relative; text-decoration:none; z-index:500; } a.tooltip:hover em { background:#FFFFCC none repeat scroll 0%; border:1px solid #BBBBBB; color:#000000; display:block; font-style:normal; left:-10px; padding:5px; position:absolute; top:20px; width:170px; }
par
a.tooltip:hover em { background:#FFFFCC none repeat scroll 0%; border:1px solid #BBBBBB; color:#000000; display:block; font-style:normal; left:0px; padding:5px; position:absolute; top:10px; width:170px; }
Je supprime a.tooltip:hover