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.
Pure-Essence.Net 
i fixed this issue by setting background-attachment to fixed for IE6 and IE7.
[Comment ID #242091 Will Be Quoted Here]
Show me an example. I tried that but it didn’t work.
[Comment ID #242094 Will Be Quoted Here]
yes, here
needs some tuning, but it was just a quick test
[Comment ID #242100 Will Be Quoted Here]
You seriously tested that in IE?? I tried it in IE 7, it looks weird.
also, is
_background-attachment : fixed;
valid CSS? would that validate against W3C?
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
Background position bottom right worked for me once I tweaked my widths to match. Thanks for the suggestion Dennis.
Grea this worKs.
ThanKs!!
[Comment ID #272111 Will Be Quoted Here]
This is the solution right here, very simple, thanks Dennis.
Awesome, saved me some time. 🙂
Thanks! :headphones:
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/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
Great script, but what about for text areas?
[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.
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
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.
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?
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
——————————————————————————————-
HTML
——————————————————————————————-
( span class=”input_text_image” )
(input type=”text” id=”input_text” /)
(/span)
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……..
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
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.