HTML: IE: Right padding in input text box

Question

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?

Answer 1

I have been looking for a way to solve this. A colleague found a solution and we tested it and it works perfectly. So the thing is to remove the padding: right and add a border: 20px solid transparent.

Answer 2

I've found one way of doing it, but its not pretty.

http://jsfiddle.net/dmitrytorba/dZyzr/162/

<!--[if IE]>
<style type="text/css">
input {
  border: none;
  margin: 5px;
  padding-right: 0px;
}
.wrapper {
    border: 1px #aaa inset;
}
.spacer{
    margin-left: 20px;
}
</style>
<![endif]-->


<span class='wrapper'>
    <input type='text' />
    <span class='spacer'></span>
</span>​