Question

I have a text-field and background-image style for the field. Below is the style applied :

.leftPaneContent INPUT {
    background-color: #FFFFFF;
    background-image: url("../images/icon-search-large.png");
    background-position: 4px 3px;
    background-repeat: no-repeat;
    border: 1px solid #D1D1D1;
    height: 14px;
    margin: 5px 0 5px 3px;
    overflow: hidden;
    padding: 2px 10px 4px 23px;
    width: 85%;
}

The image is displayed properly in FF even when I type a long value in the text-field. Whereas the image is overwritten in IE for a long value.

The problem can be seen in below image in IE

Is there a fix for this?

Answer 1

text-indent didn’t fix the problem in IE. Hence I had to move the image out of text-field and wrap that inside a div 🙂