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!
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!
Thanks a lot for this fix!! well done!
thanksssssssssss
Marry me! It saved my day. Funny I haven’t came across this bug before. Overflow: visible ftw!
Pesky pesky IE. This is a handy solve that lives in my ie-fixes stylesheet by default. Would like to add that this won’t work if the input has a display:block property. That small niggle caused me about an hour of frustration one day. If I missed it I’m guessing others might have also. Great header-image by the way đ
Thanks Darcy!
Thanks man, any solution to remove the double border on stupid IE?
Thanx It works like a charm..
Relamente Te queremossss!
Really I love you!
Thanks for this solution! XD
Thank you mrkirkland
Thanks alot!
Thanks. It was troubling me a while. Thanks for ur post !
Thanks for the article! It solved my problem just 30 minutes before my leaving for a vacation!
Thank you very much…………….
Wow, thanks!
This works perfectly! Also the nicest description of IE’s rendering engine I’ve ever heard. Usually people describe it with a torrent of swearing, which is fair enough đ
Thank you, your solution helped!
Thanks a lot, you saved me a lot of time and pain !
I have a td with in that I have 3 buttons and when ever I am hitting
the middle button the design is just moving down and causing an irregular alignment.How can I solve this?Help!!!