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.
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!