form submit button moves cutting image

Posted by flavour404 on Stack Overflow See other posts from Stack Overflow or by flavour404
Published on 2009-11-11T22:18:50Z Indexed on 2010/05/29 3:02 UTC
Read the original article Hit count: 223

Filed under:
|

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.

© Stack Overflow or respective owner

Related posts about html

Related posts about css