CSS: Extra Button Padding in IE

Today at work I was asked how to remove the extra padding added to buttons (both the button tag and input[type=button]) in Internet Explorer.

The Problem:

In the example below there is a standard button with 10px padding on all sides. Internet explorer chooses to add additional horizontal padding:

The solution:

After coming across this problem myself in the past, I eventually remembered that there are two CSS styles you can add to fix this bug feature in IE:

button {
	width: auto;
	overflow: visible;
}

5 Replies to “CSS: Extra Button Padding in IE”

  1. Ignoring IE means neglecting the majority of your users as it is still the most commonly used browser and will continue to be until Microsoft stop developing Operating Systems.

    By shipping each OS with a pre-installed version of IE, most people unfortunately don’t know any better.

    In defence of MS, IE 7 & 8 are a vast improvement from 6 and it is now possible – with a few CSS adjustments (not necessarily hacks) – to make you site look consistent across most browsers.

  2. Excelente aporte!!!…. me ahorraste varias horas de prueba y error!… (y obviamente no tiene sentido ignorar iexplore, no es opcion de quien desarrolla, sino del cliente…) GRACIAS!!

Leave a Reply