Internet Explorer Submit Button Horizontal Padding
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.
26 Comments
→
Thank you for this solution.
It works very well on IE 6 and 7
Thanks so much – I have been looking for this for AGES!
Thanks again.
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.
Oh gee, who would’ve thought it’s as simple as that. Thanks alot for the hint
Wohoo big thanks, I have been loking a long time.
Thank you! I was just searching for this.
Thank you. Very straight forward fix to another stupid IE bug!
(:
Just used this. Works well. 1
Thanks for that simple solution.
But is there a way how this works with input[type='button'], too?
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.
This seems to be fixed in Internet Explorer 8.
Thanks for saving me hours of annoyance, much appreciated.
@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 ?
Thanx!
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.
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)
Thanks for that! Nice little hack for stupid IE :-p
Guys this sucks. my submit button is not working when its an image in internet explorer.
the code is as follows
hey help there
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.
thanks for saving me hours!
d00d, your my hero! Thanks for that!
Thanks for this. I have discovered a similar issue regarding the margins, at least with IE7 and IE7
Thank you so much Kirkland, works like a charm!
Great fix! IE6 is like a bad smell that just won’t go away >:-(
Thanks for this fix, it’s been bugging me for a while!