Dynamic Button Size

In my application I have a custom tag that generates all the action buttons that the page needs.

My problem is that in IE the space between the left side of the button and the image inside the button are not consistant. Some buttons have 3 or 4 more pixels of padding on the left side then others.

This causes my buttons to be too large and hence the area the buttons are generated in stretches too far. I could wrap the buttons around to another line or add scroll bars.. but if it will fit in FF I think it should fit in IE as well.

So my question is can I set the padding between the left side of the button and the image of the button?


Code:

<button title='Clear' onMouseOver="Clear_img.src='/images/actions/shadow/action_clear.png' onMouseOut="Clear_img.src='/images/actions/plain/action_clear.png' onClick='buttonClick(this)' id='button_Clear' name='Clear'value='Clear' type='submit'><img vspace='0' width='16' height='16' name='Clear_img'src='/images/actions/plain/action_clear.png'> Clear</button>

Have you tried setting the properties of your buttons with CSS and including the image as a background image rather than in the HTML?