HTML <button> containing image, rendering incorrectly on iPhone 4, any ideas?

i'm hoping somebody can help me out here. I have a standard usernam开发者_如何学Pythone/password form that submits with a <button> tag that contains a small image.

The button is a fixed width and height with no margins, paddings, text aligned to the left and no other content bar the <img> tag. And it looks fine and works as you'd expect it to on any modern browser on my Win7 PC.

On iPhone 4 Safari (I dont have an iPad to check that out) the button appears in the correct width and height as far as I can see (by using a background colour). There is an inexplicable gap to the left and part of the image is being lost because of the overflow.

I've been unable to find any CSS that appears to be causing this, or that can fix it - so this is an annoyance. Has anyone encountered similar? Because i'm working in limited space (hence the fixed size and overflow) just leaving it is not really my preferred option as it kills the look of the box.

My present workaround is to scrap the button tag and submit the form via an onclick on the image, though I wouldn't really consider this to be ideal.

So to summarise - the BUTTON appears to be correctly sized and located, but its child IMG is rendering in the wrong place on iPhone 4.

EDIT: Sorry, should have included a link... wamdirect.co.uk is the site i'm working on, the problem is in the login box top right when viewed on iPhone 4.

do not use <img>, use:

button
{ 
   background-image: url(...);
   background-repeat:no-repeat;  
}