[Résolu] Décalage d'écriture sur DIV flottante

[Bad_dl]

La carte en svg est généré "a la volé" par php pour l'affichage.
le positionnement du DIV est fait en javascript (le remplissage est généré par un appel AJAX)
Le script java script:

Code :

function information(carte_id){
jQuery(document).ready(function(){
   $("#carte").click(function(e){
  $.ajax({
url:"../../../Medieval_war/cartes/info_case/" + carte_id ,cache:false,success:function(html){
var x_div=e.pageX -250 ;
var y_div=e.pageY -600;
$('#information_personnage').empty();
$("#information_personnage").css('left',x_div).css('top',y_div);
$('#information_personnage').append(html);

},
error:function(XMLHttpRequest,textStatuts,errorThrows){
}
});
   });
})
}

un exemple de "case" SVG

Code :

<rect x="0" y="420" height="60" width="60" style="stroke:black; stroke-opacity:0.1;fill:url(#1);">
               </rect>
<rect x="0" y="420" height="60" width="60" style="fill-opacity:0;"
                onclick="information('19992')">
               </rect>

Le bout de css qui gère cette partie
(la classe "carte" positionne l'image svg , la classe "information_personnage" (qui porte mal son nom d’ailleurs) gère le DIV d'information)

Code :

#carte
    {
    width: auto;
    float:left;
    position: relative;
    top:-395px;
    left:155px;
    }
#information_personnage
{
    -moz-border-radius: 10px;
    position: relative;
    left: 100px;
    top: 200px;
    text-align: center;
    height: auto;
    width: 500px;
    z-index: 9;
    background-image: url("../img/fontpapier.jpg");
}
#information_personnage h3
{
    color:black;
    text-decoration:underline;
    text-align:center;
}

je met pas tous car ça serai sans doute trop long et pas utile (enfin je pense)

j'ai l'impression que mon probleme provient d'une "compatibilité" svg/html.
Vue que si je réduit la taille du svg ,le décalage se réduit aussi....