IE input background image issue

IE strikes AGAIN!

Just when I thought I was 100% done with the revamp of New Millennium, I noticed an UI issue in IE. I’m surprised I didn’t notice this before. It shouldn’t be anything new. I did some google research but didn’t find anyone mentioning it either.

Applying background image to input tags should be nothing new. You see the little search icons for search inputs all over the web now but did anyone notice in IE if you have a background image set to no-repeat and someone puts some very LONG text in the input field, the background image SCROLLS with the text? This causes very odd behavior.

Here’s my input background-image. I pick this one so I can do background image affect on hover by manipulating background-position.

CSS:
input.formInput { width: 255px; background: #a99787 url(formInput.gif) left top no-repeat; border: 0; padding: 3px; height: 22px; color: #302721; } input.formInput:hover, input.formInput:focus { background-position: -261px top; }

In Firefox, it looks great but in IE if you start putting very looooooooooooooooong text in the input, it will look like crap.
background image looks like crap in IE

Try it out yourself

So does anyone have a good solution for this issue?

If I were to do it, I’d wrap the input in a container and put the background image on the container and hopefully by applying the hover affect on the container, it would get the desirable effect. ~~Of course I will need to test out my theory. But it’s past midnight so I should get some sleep for now.~~

AND it does work. check it out.

Man, I just love IE.

IE, input background image, long text, scroll

Print article

This entry was posted by dodo on 02/28/2008 at 1:19 AM, and is filed under geeky, non php code, rants. Follow any responses to this post through RSS 2.0. You can skip to the end and leave a response. Pinging is currently not allowed.

Related Posts
Comments (18)

#1 written by maghiel
about 2 years ago

Reply Quote

i fixed this issue by setting background-attachment to fixed for IE6 and IE7.
#2 written by dodo
about 2 years ago

Reply Quote

[Comment ID #242091 Will Be Quoted Here]
Show me an example. I tried that but it didn’t work.
#3 written by maghiel
about 2 years ago

Reply Quote

[Comment ID #242094 Will Be Quoted Here]

yes, here

needs some tuning, but it was just a quick test
#4 written by dodo
about 2 years ago

Reply Quote

[Comment ID #242100 Will Be Quoted Here]

You seriously tested that in IE?? I tried it in IE 7, it looks weird.
#5 written by dodo
about 2 years ago

Reply Quote

also, is
_background-attachment : fixed;
valid CSS? would that validate against W3C?
#6 written by Dave
about 2 years ago

Reply Quote

Thanks for this. saved me a lot of time.
#7 written by nick
about 1 year ago

Reply Quote

background-attachment:fixed; seems to work in IE6
#8 written by rr
about 1 year ago

Reply Quote

if background-attachment:fixed worked in ie7, it’s because it is in quirksmode, not XHTML strict. only xhtml-compliant solution is to wrap the input field in a span or div and apply the bg image to that.
#9 written by Dennis
about 1 year ago

Reply Quote

try to set background position to “bottom right”, then it shouldn’t scroll on text overflow
#10 written by WiReDbeatBoX
about 1 year ago

Reply Quote

[Comment ID #272111 Will Be Quoted Here]
This is the solution right here, very simple, thanks Dennis.
#11 written by Daniel Nordstrom
about 1 year ago

Reply Quote

Awesome, saved me some time.

Thanks!
#12 written by Janis
about 1 year ago

Reply Quote

OK, so someone else has encountered this! I wander what is the explanation for IE to do this…
#13 written by tom
about 1 year ago

Reply Quote

The aspect of positioning the background element to the bottom right did the trick for me.

background:#fff url(../Images/input285x28.gif) no-repeat bottom right

However, if you apply padding to the element

padding:6px 10px; background:#fff url(../Images/input285x28.gif) no-repeat bottom right

the text, as it it is typeed, will make the backgroud jump into and out of position. Applying even padding on the both the left and right side of the element will fix this issue.

Tom
Developer
#14 written by Rachel
about 1 year ago

Reply Quote

Great script, but what about for text areas?
#15 written by Noah
about 10 months ago

Reply Quote

[Comment ID #276106 Will Be Quoted Here]

the bottom-right trick works fine, but putting equal padding on both right and left sides of the input box still breaks in IE for me.
#16 written by yajra
about 7 months ago

Reply Quote

hey guys,

here’s my solution to ie scrolling bug. hope this helps!
just add this line

line-height:1;

my actual code:

.inputbox {
font: 11px/24px Arial, Helvetica, sans-serif;
line-height:1;
}

YAJRA
Developer
#17 written by MArk
about 2 months ago

Reply Quote

The idea of using background-position: bottom right; is great if you are using single background image files, but not when you are using sprites.
#18 written by Daniel
about 1 month ago

Reply Quote

We encountered this problem with inputs, that use a ‘sliding-door’-technique.

We have a structure like:
-> div ‘left-sliding-door’
->->input ‘right-sliding-door’, background-image-position: right
-> /div

A possible solution would be to wrap another container, but changing the mark-up is not an option… any suggestions?