Loading ...
IE input background image issue
February 28th, 2008
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.
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.
15 Comments Leave a Comment
March 4th, 2008 at 9:42 ammaghiel on 3/4/2008 at 9:42 am said:
i fixed this issue by setting background-attachment to fixed for IE6 and IE7.
Show me an example. I tried that but it didn’t work.
dodo on 3/4/2008 at 9:47 am said:
Show me an example. I tried that but it didn’t work.
yes, here
needs some tuning, but it was just a quick test
maghiel on 3/4/2008 at 9:57 am said:
yes, here
needs some tuning, but it was just a quick test
You seriously tested that in IE?? I tried it in IE 7, it looks weird.
Thanks for this. saved me a lot of time.
background-attachment:fixed; seems to work in IE6
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.
try to set background position to “bottom right”, then it shouldn’t scroll on text overflow
Dennis on 12/1/2008 at 5:31 pm said:
try to set background position to “bottom right”, then it shouldn’t scroll on text overflow
This is the solution right here, very simple, thanks Dennis.
OK, so someone else has encountered this! I wander what is the explanation for IE to do this…
The aspect of positioning the background element to the bottom right did the trick for me.
background:#fff url(../Images/input285×28.gif) no-repeat bottom right
However, if you apply padding to the element
padding:6px 10px; background:#fff url(../Images/input285×28.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
Great script, but what about for text areas?
tom on 4/9/2009 at 7:59 am said:
The aspect of positioning the background element to the bottom right did the trick for me.
background:#fff url(../Images/input285×28.gif) no-repeat bottom right
However, if you apply padding to the element
padding:6px 10px; background:#fff url(../Images/input285×28.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
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.
i fixed this issue by setting background-attachment to fixed for IE6 and IE7.