form submit button moves cutting image

I have a submit button and am styling it using the following css:

.subm
{    
background-color:Transparent;
background-image:url(Images/Button_Send.png); 
background-repeat:no-repeat;
width:82px;
height:30px;
display:block;
border:none;
outline:none;
overflow:visible;}

   .subm:hover
{
    background-color:Transparent;
    background-image:url(Images/Button_Send_Over.png); 
    background-repeat:no-repeat;
    width:82px;
    height:30px;
    display:block;
  border:none;
    outline:none;
    overflow:visible;
}

Here is the html:

<input type="submit" class="subm" value="" />

N开发者_JAVA百科othing surprising. However, what annoys me is that when the submit button is clicked in IE it moves the image up a couple of pixels cutting them off which makes it look, hmm, good word, 'naff.' How can I compensate or stop this?

I have tried expanding the image and leaving a couple of blank pixels at the top but it still does the same thing!

Thanks R.

I had an issue with my buttons moving around when they were clicked in IE after I styled them too. The solution I found was:

1.) Give your button(s) an equal margin 2.) Place the button(s) in a wrapper division that you can position to your liking

.subm {    
   background-color:Transparent;
   background-image:url(Images/Button_Send.png); 
   background-repeat:no-repeat;
   width:82px;
   height:30px;
   display:block;
   border:none;
   outline:none;
   overflow:visible;
   margin:10px; //maybe more maybe less
}

<div style="position:...;float:...;">
  <input type="submit" class="subm" name="myButton" id="myButton" />
</div>

Although I have to mention that in my particular case I'm styling my buttons by ID and not applying a class so you might have issues with multiple buttons using the .subm class. THIS WORKED FOR ME IN IE THOUGH.

Try replacing the input with the button tag.

<button type="submit"><img src="..." alt="..." /></button>

and see if this doesn't accomplish it. You would need to adjust your hover effects though which might prove to require either just putting text inside the button and using a negative text-indent, or a javascript hover event to change the referenced image.

Another option is using javascript to call the form submit on a normal link, as buttons typically have a click animation.

Just a note, you could probably get more consistent results by adding a background position, and all of this you can shorthand as well

   .subm:hover
   {
     background: transparent url("Images/Button_Send_Over.png") top center no-repeat;
   }

Yet another maybe more ideal option, use the input type image instead of submit.

<input type="image" src="..." Value="Submit" />

I am pretty sure this describes the bug and has some solutions for you:

Fixing the IE8 Form Button with Background Image On Click CSS Bug