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; }
Ignore all ie bugs, hopefully microsoft will work it out that the browser is poo and they need to sort it!!
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.
A useful little post, may want to tag it with css to make it easier to find
Excellent post, was looking for a fix to this all morning.
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!!