form submit button moves cutting image

Question

Hi

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="" />

Nothing 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.

Answer 1

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" />

Answer 2

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