Internet Explorer Button width/padding bug.

Recently while working on a web-app at my day job I ran across another IE specific rendering idiosyncrasy. I noticed that if I put lengthier text in a button (be it a button tag or and input type=”button”) that IE would progressively increase the amount of padding on either side of the text. Or at least that’s what it looked like to me.

Ordinarily I think this issue goes totally unnoticed – there isn’t a lot of info out there on the web about it (at least that’s what I thought at the time – I’ve since found a number of sites covering the topic). Most of the time our buttons have text like Save, Submit, Go – that sort of thing. 

I was flummoxed by this for a while. I was, after all, declaring my padding explicitly, and IE seemed to be rendering it. Rendering it and then some more depending on how much text was in the box. How could I trick IE into behaving like a nice, normal, standardsy browser?

I searched and searched the inter-tubes until I found a simple solution in the comments of a site that, I think, was in Portuguese. Unfortunately I didn’t make a note of where it was so I can’t give credit, nor could I understand anything that was written other than

 overflow: visible;

Now there were other folks on other sites advocating all manner of other, additional style declarations – setting width to auto or to 1% - none of which worked for me. But as soon as I popped that declaration in on my inputs IE’s buttons fell in line.

If you’re experiencing the same issue you might consider adding this to your style sheet.

 * html input { overflow: visible; }

Non-IE browsers will ignore it and, really, you aren’t telling them to do much of anything anyway (inputs don’t generally overflow you know). 

If you find that this doesn’t solve all of your IE button width related issues then I suggest you pursue some further reading.