IE 8 moves the text of the enter button when pressed

Question

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

IE drops text down and 1px when the default button is clicked. Is there a way to stop this with just CSS?

I also add my own styles to this button, and everything is fine until I click on the text in the button ... IE seems to ignore: the active state defined in my stylesheet. But if I press a button, not text, IE will execute: active state. Of course, the problem of moving text is still present no matter what I do.

Any ideas?

Answer 1

If you use the stylized tag A, you completely bypass this problem by "pushing". Using display:block and some CSS, you can customize the A tag to look just like any button.

Answer 2

So, I had the same problem, and I found a solution that works for all browsers.

I had two form buttons that I changed the borders, the font family and sizes, and the addition. When I click on them in IE, they will “jump” because IE is stupid in my opinion. All other browsers seem to have typed the buttons correctly and have no problem displaying the buttons when the user clicked them.

The solution I found was:

Adjust the buttons of the form so that each of them has an equal margin and applies the separation of the wrapper with a position or brand that will be compensated to your taste.

  #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> 

Answer 3

I don’t know which version of IE you are using, but try shifting the background of the button. Also check Remove the effect of three-dimensional clicking on the button , in particular the response from allicarn, which changes the indentation of the on: active element. Just do not forget to put css in specific cases of IE, as an IF block.