IE 8 moves text of input button when clicked

Question

<input type="button" value="Button" />

IE indents the text down and over by 1px when the button is clicked by default. Is there any way to stop this with just CSS?

I'm also adding my own styles to this button, and everything is great until I click the text in the button... IE seems to ignore the :active state defined in my stylesheet. But if I click the button and not the text, IE performs the :active state. Of course the text moving issue is still present no matter what I do.

Any ideas?

Answer 1

If you use a styled A-tag you get around this whole "pressed" state issue completely. Using display:block and some CSS you can style the A-tag to look exactly like any button.

Answer 2

Okay, so, I had the same problem and I've discovered a solution that works for all browsers.

I had two form buttons that I changed borders, font family and sizes, and padding on. When I would click them in IE they would "jump" because IE is stupid in my opinion. All other browsers seemed to style the buttons correctly and not have a display issue with the buttons moving when the user clicked them..

The solution I found was:

Style the form buttons so that each of them have an equal margin and apply a wrapper division with a position or margin that will offset to your liking.

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



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