Ouverture de SUPINFO USA à San Francisco en 2008. Des études en informatique en Californie à un tarif abordable ! Inscrivez-vous dès maintenant !

Recherche

2 messages

Startide

[CSS] Conflit CSS dans tooltip javascript - une propriété non utilisée fait bugger..

le 06 Juin 06 à 11h25

Salut à tous :)

Voilà j'ai un javascript qui me sert à afficher une tooltip, comme c'est le cas dans beaucoup de sites internet liés à world of warcraft.

Or j'ai un bug d'affichage asser pénible, dont j'ai trouvé l'origine sans la comprendre. voici un visuel comparatif :

Le tooltip me donne du CSS à intégrer dans mes feuilles de style, afin d'afficher les couleurs qui vont bien sur les objets. Mais j'ai un conflit avec mon propre CSS... Comme on peut le voir, j'ai commenté la ligne du TD (j'ai retiré le reste du CSS pour plus de lisibilité. Quand ce bloc est commenté l'affichage est correct, quand il n'est pas commenté ca chie :/

Code :

/*
td{
color:#000;
padding:0.2em;
padding-left:1em;
padding-right:1em;
}
*/
/*    CSS tooltip effect       */

.wowitem {  font-family: arial,sans-serif;  font-size:12px;  color: #e5e0dd;  border: 1px solid #a9a9a9;  padding: 3px;  background-color: #333333;  -moz-border-radius: 5px;  min-width: 150px;  max-width: 350px;}
A.wowitem {color: #ffd200;}
.iname {font-size: 18px;}
.wowrttxt {  float: right;  display: compact;  position: relative;  top: -14px;  text-align: right;}
.credit {font-family: arial,sans-serif;font-size: 11px;}
A.credit { font-size: 11px;color: blue;}
.greyname {color: #9d9d9d; }
.whitename {color: #FFFFFF;}
.greenname,.greentext,.itemeffectlink {color: #1EFF00;}
.bluename {color: #0070DD; }
.purplename {color: #A434EE; }
.orangename {color: #D17C22; }
.redname {color: #f00; }
.goldtext {color: #ffd200;}

Voici maintenant le html qui gère l'affichage :

Code :

<title>Liste des objets</title>
<script type="text/javascript">
// Valeurs par défaut
var ol_bgcolor = "#000000";
var ol_hauto = 1;
var ol_vauto = 1;
var ol_border = 0;
var ol_cellpad = 0;
var ol_width = 300;
</script>
<script type="text/javascript" src="overlib.js"></script>
</head>
<body>

<div id="overDiv" style="position:absolute; visibility:hidden; z-index:1000;"></div>

<script type="text/javascript">
var desc18203 = '<div class=\"wowitem\"><span class=\"iname\"><span class=\"purplename\">Eskhandar&amp;apos;s Right Claw</span></span><br />Binds when picked up<br />Unique<br/>Main Hand<span class=\"wowrttxt\">Fist Weapon</span><br/>50 -  94 Damage<span class=\"wowrttxt\">Speed 1.50</span><br/>(48.0 damage per second)<br/>+4 Agility<br/>Requires&amp;nbsp;Level&amp;nbsp;60<br/><span class=\"itemeffectlink\">Chance On Hit: <a href=\"http://wow.allakhazam.com/db/spell.html?wspell=22640\" class=\"itemeffectlink\">Increases your attack speed by 30% for 5 seconds.</a>&amp;nbsp;</span><br/><br/><a href=\"http://wow.allakhazam.com/db/itemset.html?setid=261\"><span class=\"goldtext\">Spirit of Eskhandar</span></a><br/><br/><span class=\"credit\">Item display is courtesy <a href=\"http://wow.allakhazam.com/\">wow.allakhazam.com</a>.</span></div>';
 </script>

<span onmouseover="return overlib(desc18203);" onmouseout="return nd();">Description</span>
</body>
</html?#62;

Comme vous pouvez le voir, il n'est pas question de "TD" dans mon exemple, d'ou ma surprise concernant le bug... je pourrais effectivement retirer les propriétés CSS de padding de mon TD pour corriger le problème, mais cela va m'obliger à faire de très nombreuses modifications dans beaucoup de pages, ce qui est un peu l'inverse du principe des CSS quoi :/

Dans mon appli, la tooltip est bien située dans un tableau, ce que je pensais être l'origine du bug... mais en fait dans mon exemple test il n'y a pas de tableau, ca ne devrait donc pas impacter...

Est ce que quelqu'un est inspiré ?