Skip to content

Internet Explorer Submit Button Horizontal Padding

by Mr Kirkland on June 7th, 2007

As you already know Internet Explorer takes great care to interpret HTML and CSS in it’s own special way and only sometimes does this co-incide with the W3C’s specification. The padding on Submit Buttons is one such nuisance.

Simply, IE simply ingores any horizontal padding you specify with css. The solution, I discovered, it to use the “overflow: visible” for all such elements e.g.

Before

<input type="submit" value="Internet explorer ignores my padding" style="padding: 20px;" />


After:
<input type="submit" value="Internet explorer respects my padding" style="padding: 20px; overflow: visible;" />

NB For this example I’ve put the style inline with the html – for real use this should be separated from the html in an external style sheet.

From → CSS

26 Comments
  1. Vince permalink

    Thank you for this solution.
    It works very well on IE 6 and 7

  2. Rene Robinson permalink

    Thanks so much – I have been looking for this for AGES!
    Thanks again.

  3. Amanda C. permalink

    Thank you so much for putting this out here. I have been looking for a solution to this problem for a current project at work. This works perfectly.

  4. Lenny permalink

    Oh gee, who would’ve thought it’s as simple as that. Thanks alot for the hint :)

  5. jeep permalink

    Wohoo big thanks, I have been loking a long time.

  6. Ray permalink

    Thank you! I was just searching for this.

  7. Eric permalink

    Thank you. Very straight forward fix to another stupid IE bug!
    (:

  8. Just used this. Works well. 1

  9. Jones permalink

    Thanks for that simple solution.
    But is there a way how this works with input[type='button'], too?

  10. overflow:visible can trigger sometimes a weird bug in ie7: when you scroll down the page, the button text disappears. Then it appears again, sometimes complete, sometimes as if it was half erased. Really annoying!
    I saw it in action several times. It happens when I set a background image for the input.

  11. Simon Bruce permalink

    This seems to be fixed in Internet Explorer 8.

  12. Rollo permalink

    Thanks for saving me hours of annoyance, much appreciated.

  13. Alex permalink

    @Robert : I had this weird “disappearing content” bug in IE7 too when setting the overflow:visible property on an input submit that has a background image. I changed the value to “auto” (overflow:auto;)and added a text-align:left and it got rid of this problem. Does this work for you ?

  14. Bartezz permalink

    Thanx!

  15. Tina permalink

    Does not seem to work if you need the padding and the margin to be 0. I have a div that is 115px wide with a background image of a button.

    Inside that div is my input type of submit. I have a class that sets the padding of that to 0px. But IE wants to add 10px to the left-hand side, no matter what I try.

    Firefox and every other browser work perfectly.

    Oh well. Hopefully someone else has seen this bug before and knows a fix.

  16. Dhiraj permalink

    Hi,

    great solution!! Thanks..

    It will be also great if someone comes up with a solution to avoid the clicking(the button moves in and out when clicked)

  17. Thanks for that! Nice little hack for stupid IE :-p

  18. Guys this sucks. my submit button is not working when its an image in internet explorer.
    the code is as follows

    hey help there

  19. Foo permalink

    BLESS you, Mr. Kirkland. I mean, really, “overflow: visible” is so achingly intuitive, and yet somehow I overlooked it. (Sarcasm, dripping. “Clean up on aisle 7!”)

    Seriously… you’re a hero.

  20. wynne permalink

    thanks for saving me hours!

  21. Gregor permalink

    d00d, your my hero! Thanks for that!

  22. Georg Sender permalink

    Thanks for this. I have discovered a similar issue regarding the margins, at least with IE7 and IE7

  23. Thank you so much Kirkland, works like a charm! ;)

  24. rexusdiablos permalink

    Great fix! IE6 is like a bad smell that just won’t go away >:-(

  25. Thanks for this fix, it’s been bugging me for a while!

Trackbacks & Pingbacks

  1. IE7 Ignores Submit Button Padding - Twitter Homepage « XBDiff Blog

Leave a Reply

Note: XHTML is allowed. Your email address will never be published.

Subscribe to this comment feed via RSS