Online Promoters™ :: Web Development made simple

IE7 Input background image scroll upon typing a long text


As you probably already know having a background image on an input field is buggy in ie7.
When you type in a long text the image scrolls left ...
Even if there are a lot of opinions regarding this issue on the web none worked for me as I wanted (cross-browser).

Here is my solution:

The CSS:

[sourcecode language="css"]
input#SearchInput {
border: 0;
width: 230px; /* Your background image width */
height: 22px; /* Your background image height */
line-height: 22px; /* Your background image height */
background:transparent; /* This is the trick */
}
#ieSuge {
background:url(/images/your_input_image.png)  no-repeat left top;
height: 22px;
}
[/sourcecode]

The HTML:

[sourcecode language="html"]
<div id='ieSuge'>
<input id='SearchInput' type='text' />
</div>
[/sourcecode]

Try it...
It works in ie6, ie7, FF,Chrome,Opera
If you find useful my solution leave me a comment!
Like always if i missed something just drop me some lines below