Taming button padding in Internet Explorer

Here's another one of those irritating little CSS issues that comes up from time to time. When you use the <input type="submit" value="Click Me!"> element for a form button, IE always assumes it knows what's best for you in the area of horizontal padding. And if all you want is a simple button, that's fine; but what if you want to kick it WinXP style and have a little icon at the left of the button? You'd think you could just manipulate the left padding for the <input> and drop in your background image positioned to "0 50%", right?

Wrong. For whatever reason, IE ignores your padding rules and does whatever the hell it wants. Until now.

This time, when I discovered that our contractors had dodged this issue by using image buttons with rastarized text – thus removing any hope of applying hover and disabled styles, and locking in their misspellings – I decided the right solution was to switch to buttons. That's when I remembered the previous problems I'd had with button styling.

This time, when I went looking for answers, I found Mr. Kirkland's posting. The workaround turns out to be quite simple, but far from intuitive. I have sent many karma points his way, and this blog posting is my way of ensuring I won't ever lose track of the information.