Bonjour, comme un dessin vaut mieux qu'une explication :

http://www.novagame.info/map5.php

Autour du personage 6 petites fleches en pointillés.
Exactement au même format et directement mise dans la balise <a> (sans lien) vous trouverez un <input type="image">

Comme vous pouvez le constater (et c'est plus flagrant sur la fleche HAUT DROITE), j'ai un décalage de 1 px entre les deux images (celle mise par le CSS pour le A en background & Celle du input) alors qu'a priori il n'y a aucune raison.

Voici le script des "boutons"

echo ' <a id="padhd" style="position: absolute; left: ' . ($coord_x + 28 ) . 'px; top: ' . ($coord_y + 1) . 'px;" ><input type="image" name="dir" value="2" src="pad0b.gif"></a>';

Voici mon CSS :

a#padhd
{
display:block;
width:22px;
height:13px;
background: url(pad2.gif)no-repeat 0 0;
}
a#padhd:active, a#padhd:focus, a#padhd:hover
{
background-position: 0 -13px;
}

Il va de soit que l'image : pad0b.gif fait 22 sur 13 et que la pad2.gif fait 22 sur 26 (mais n'affiche que les premier 22 * 13 puis glisse de 13 pixel en hover)

Quelqu'un pourrait-il me suggerer la raison de ce décalage de 1 pixel ? Je me charge ensuite de vérifier, corriger et tout cela.

Déja tenté :

1- Mettre un padding: 0px; dans le CSS ... aucun effet.

Merci de votre aide à tous.