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.

    Like

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

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s