7

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.

Shakti Singh
  • 84,385
  • 21
  • 134
  • 153
Ham
  • 804
  • 3
  • 15
  • 25
  • What version of IE are you using and what mode are you running it in?; e.g. '' – Rich Oct 24 '11 at 11:50
  • Internet Explorer rendering problems is almost a dark art. I suggest that you add a live example and give more information about what flavor of Internet Explorer renders the problem. You should be able to view what's going on by using Internet Explorer Inspector, it's not as advanced as the one that Modern Browsers like Chrome provide but will give you an idea of what's going on. – MarioRicalde Oct 24 '11 at 11:40

3 Answers3

16

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.

Community
  • 1
  • 1
Louise
  • 1,451
  • 1
  • 18
  • 40
  • This worked for me too. 'Phantom' padding. Thanks IE8 programmers - that's another few hours of my life you've wasted. – Nigel Alderton Aug 03 '13 at 18:30
  • How would one go about fixing it inside table cells? – Kid Diamond Dec 10 '13 at 15:00
  • Check out the comments to the linked solution. The table issue is discussed further down. Rather to the end somebody states that `width:1px; overflow:visible;` would do the trick. You can give that a try? – Louise Dec 11 '13 at 12:15
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

Rohan Patil
  • 2,328
  • 1
  • 16
  • 23
0

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.

user3459603
  • 1