How can I prevent Internet Explorer from adding padding to buttons when pressed?

Question

I have designed my submit buttons using CSS. In any Webkit or Gecko browser it works perfectly, but Internet Explorer 9 adds padding to the button's text when it is pressed down. In addition, you can see this stupid dotted border. It looks like this then:

http://img6.imagebanana.com/img/tkp7l8m3/button.png

The special background image which I have specified in CSS for input:active is only shown in IE, if the button is clicked in the very thin area between the button's border and this dotted border. If the button is clicked in the middle it keeps the hover-background although it is pressed down.

Can anyone help me remove this extra padding and the dotted border?

Thanks in advance

Qoguth

Answer 1

To get rid of the dotted border you can use pure CSS:

button { outline: none; }

As for padding when clicked, I fear it's part of the internal browser behavior that can't be changed.

Answer 2

You could try:

/* Swap 1px 6px for your desired top+bottom and left+right padding. */
button { padding: 1px 6px; }
button:active { outline: none; padding: 1px 6px; }

Presuming you actually want padding and not some other property.

Answer 3

Both of the answers given so far are incorrect in an important way. You should only hide the keyboard focus outline on:active, hiding it on:focus too hurts keyboard navigation.

button:active { outline: none; }

As has been stated, the increase in top-left padding is not overridable.