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.

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.