Problème de marge : <a> dans <td>

Bonjour à tous,

Je cherche à créer des boutons qui se décalent quand on clique dessus. Pour cela, voilà le code d'un bouton :

<td id="menu_accueil" class="bg">
	<a onclick="document.getElementById('menu_accueil').className = 'bg_click';this.className='click';" href="./?page=accueil">Accueil</a>
</td>

Au niveau du css :

#menu td
{width:140px;
height:37px;
/*border:none;*/
text-align:center;}

#menu a
{font-size:16px;
font-weight:normal;
margin:0;
padding:0;}

#menu a:link,#menu a:visited,#menu a:hover
{color:#000000}

#menu .click
{margin:2px 0 0 2px;}

.bg
{background-image:url(./images/menu/bouton_menu_bleu.gif)}
.bg_click
{background-image:url(./images/menu/bouton_menu_bleu_click.gif)}

Le but c'est que quand on clique sur le lien, l'image de fond se décale de 2px vers la droite et le bas, et le lien aussi grâce aux marges. Seulement, mon lien ne se décale que vers la droite et pas vers le bas... Où est mon erreur ?

Pour voir le bouton :Site le code étant implémenter sur le bouton 'accueil'.
Modifié par Goldenlocks (10 Apr 2007 - 15:51)