<Table> décalé dans FF/Chrome/Safari

Bonjour !

J'utilise un <table> pour représenter des pixels dans une app de pixelart en ligne.
Ca fonctionne bien. J'ai pu redécouvrir les techno du web via ce petit projet.

Mais je suis foncièrement mauvais, et encore plus foncièrement bloqué alors je viens foncièrement (c'est la dernière fois promis) vous demander un peu d'aide et quelques explications:

http://pixelart4gcn.appspot.com/validator

J'ai étalonné la placement en fonction du résultat dans firefox.
Mais sous Chrome le tableau (le carré où l'on peut dessiner) apparait deux pixels plus bas, et sous safari il est un pixel trop haut. C'est vraiment embêtant.

Je ne suis pas certain que le css puisse vous aider dans ce cas présent:

body
{
    font-family: Verdana, Helvetica, sans-serif;
    /*background-color: #CCCCCC; */
    background-image: url('pattern_bg.jpg');
    background-repeat: repeat;
    
}

#editor
{
    position: relative;
    margin: 8% 30%; 
    background-image: url('machine01.jpg');
    width: 551px;
    height: 321px;
    
    text-align: center;
}

/* c'est lui qui bug */
#picture_editor
{
    position: relative;
    left: 36px;
    top: 12px;
}

#clear
{
    position: relative;
    left: 300px;
    top: 60px;
    width: 10%;
    
    
}

#picker
{
    
    position: relative;
    top: 64px;
    left: 282px;
    width: 30%;
}

ps: le color picker n'est là que temporairement. Il est pas sexy, et il bug sous ie 8.
Modifié par MrGecko (11 Oct 2009 - 22:41)