Remove extra padding in IE button

Question

In my website, there are lots of buttons. When viewing in Chrome, the button width just fit on the dynamic button text, but in IE, I can see extra padding are produced on both left and right...

Would there be any CSS rule that can allow me to take away these padding? Thanks.

Answer 1

Might be a bit late, but when I searched SO for the very same problem today I found this question . Obviously, this is no real padding (in a sense that it cannot be turned off by padding:0px ), but rather one of those weird oddities that we all love so much about IE. (Note how the false padding scales with button text length O_o). Fortunately, there is a simple solution to it, as described here .

Basically you only add overflow:visible; to the button (I did not need the extra width:auto; as described there). Don't ask - it's absolutely not what you'd have thought this should do, but well... It's IE Land and the rules are different over there. Just note that this apparently does not work when your buttons are inside a table cell.

I guess the CSS reset might have solved this, because someone already included this in some global declaration. Just adding this answer to shed some more light on the how and why.

Never give up, people - our children will see a world without IE quirks... One can hope.

Answer 2

You can use reset css as it avoids browser inconsistencies.

Please refer http://sixrevisions.com/css/css-tips/css-tip-1-resetting-your-styles-with-css-reset/

Visit http://www.cssreset.com/scripts/html5-doctor-css-reset-stylesheet/ for reset.css

Answer 3

Managed to avoid extra spacing in IE with extra statement display:block; in CSS like so:

.menu button{
    display:block;
    width:100%;
    padding:0;
}

Note that I didn't use width:auto as it wasn't an option in my case - buttons are empty, width is taken from parent div.