buttons.

Hi everybody,

I have a CSS problem.
I am developping a GUI. And I have decided to develop the graphical component in CSS as button
And You will say what is the bug. My image appears and When I go over. Another image appears but with a move of some pixels.
I have tried to play width padding option but the result is worst :? .

If anyone got the answer ?
Thanks,

-----------------------------------------------------------------------------------
So there are my CSS Classes :

.bouton {
display:block;
width:89px;
height:20px;
text-decoration:none;
text-align:center;
background-image:url('button-enable.png');
padding:5px
}

.boutonHover {
display:block;
width:89px;
height:20px;
text-align:center;
background-image:url('button-over.png');
padding:5px
}

.boutonClick {
display:block;
width:89px;
height:20px;
text-align:center;
background-image:url('button-click.png');
padding:5px
}

And this is the code of the button :

<table>
<tr>
<td width='99' height='30' onmouseover="this.className='boutonHover';" onmouseout="this.className='bouton';" onclick="this.className='boutonClick';">
<a href='' class='bouton'>
Annuler
</a>
</td>
</tr>
</table>