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: 221
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