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.
6 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.
i fixed this issue by setting background-attachment to fixed for IE6 and IE7.