Removing displacement of button on IE when clicking

When you click on a button on IE, the text moves slightly to the bottom and right, in order to give the effect of it being pressed.

However, if you customize your button and add, say, a background image on it (like an arrow as in "Submit ->") this effect doesn't look good. Is there a way to remove it? I tried to add padding when el开发者_StackOverflow中文版ement is :active but it still doesn't overwrite the effect (and I think button:active doesn't work on IE7).

Could somebody give me hand on this?

Thanks in advance!

I had an issue with my form buttons "jumping" or moving positions around with IE and the solution I found was to:

1.) Give your form button equal margins

2.) Place a wrapper division around your button(s) and position the division to your preferences

#myButton {
   border: 1px solid #f7f6f4;
   font-family: Times New Roman;
   font-size: 16pt;
   padding:15px;
   margin:10px;
}

<div style="float:right;margin-right:75px;">
<input type="submit" name="myButton" id="myButton" value="Don't Move!" />
</div>

Let me know if this worked for you in your situation ..

Just put the button inside a div tag.

<div><input type="submit" name="myButton" id="myButton" value="Don't Move!" /></div>

This worked for me.