Go to http://jsfiddle.net/srLQH/ and fill in the input text box in the "Result" view.
If you do this in FF, Chrome, and Safari, your text will stop 20px short of the right side.
In IE 7/8, the text does not stop 20px short--it goes all the way to the edge of the input box.
What's the deal with IE? How can I get the same padding effect in IE that all the other browsers give me?
It appears as if IE is applying the CSS, just not until the very end of the line. That is, the padding is influenced by the value, rather than the value influenced by the padding.
When setting the padding to 20px all the way around with a default value longer than the default width, you can scroll to the end and see the padding. http://jsfiddle.net/dZyzr/
You're going to have to come up with some visual trick, or just use a different style sheet for IE.
Just chuck it in another element which does do padding in IE, such as a div. Then you don't need to worry about ugly hacks invalidating your css stylesheet. Remember to remove the padding from the input so it doesn't annoy other browsers. This is also the only way to give a text box a background image which doesn't scroll with the text in IE.