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.
background image
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.

About these ads

25 thoughts on “IE input background image issue

  1. 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.

  2. 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

  3. [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.

  4. 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

  5. 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.

  6. 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?

  7. Hello I fixed that problem in this way:

    CSS
    ——————————————————————————————-
    #input_text{
    border: 1px solid #FFFFFF;
    color: #2A2A2A;
    display: inline-block;
    font: 14px Verdana,sans-serif;
    height: 19px;
    margin-left: 2px;
    margin-top: 3px;
    outline: medium none;
    padding: 0 3px;
    width: 218px;
    }

    .input_text_image{
    background: url(“../img/image.png”) no-repeat scroll 0 0 transparent;
    display: inline-block;
    height: 27px;
    width: 232px;
    }

    HTML
    ——————————————————————————————-

  8. HTML
    ——————————————————————————————-
    ( span class=”input_text_image” )
    (input type=”text” id=”input_text” /)
    (/span)

  9. none of these provided solutions work in IE, m using sprite images…….plz if any one knows the rite sol….i vl b vry thankful….its frustating me……..

  10. same issue here, works with FF, Chorme, IE9 (did not tested Opera, Safari) but not with IE7 and IE8.

    The code:
    http://jsfiddle.net/CEjXe/4/

    I know i can wrap the input with a div and style the div with padding and background image. i’m looking for a different solution(if there is 1).

    Thanks

  11. I don’t think there is any other method than to apply a span as a parent to the input box and just add a background image to the span and give a none background to the input box. I think this should work fine in all the browsers.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s