IE input background image issue
Posted by: pureessence on: February 28, 2008
- In: geeky | non php code | rants
- Comment!
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.
23 Responses to "IE input background image issue"
March 4, 2008 at 9:47 am
[Comment ID #242091 Will Be Quoted Here]
Show me an example. I tried that but it didn’t work.
March 4, 2008 at 9:57 am
[Comment ID #242094 Will Be Quoted Here]
yes, here
needs some tuning, but it was just a quick test
March 5, 2008 at 6:29 pm
[Comment ID #242100 Will Be Quoted Here]
You seriously tested that in IE?? I tried it in IE 7, it looks weird.
March 5, 2008 at 6:31 pm
also, is
_background-attachment : fixed;
valid CSS? would that validate against W3C?
November 1, 2008 at 12:23 pm
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.
December 1, 2008 at 5:31 pm
try to set background position to “bottom right”, then it shouldn’t scroll on text overflow
January 5, 2011 at 6:25 pm
Background position bottom right worked for me once I tweaked my widths to match. Thanks for the suggestion Dennis.
February 18, 2009 at 1:28 pm
[Comment ID #272111 Will Be Quoted Here]
This is the solution right here, very simple, thanks Dennis.
March 23, 2009 at 8:45 pm
OK, so someone else has encountered this! I wander what is the explanation for IE to do this…
April 9, 2009 at 7:59 am
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
October 14, 2009 at 2:02 pm
[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.
January 7, 2010 at 10:14 pm
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
June 7, 2010 at 3:45 am
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.
July 7, 2010 at 4:01 am
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?
August 6, 2011 at 12:33 pm
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
——————————————————————————————-
August 6, 2011 at 12:36 pm
HTML
——————————————————————————————-
( span class=”input_text_image” )
(input type=”text” id=”input_text” /)
(/span)
November 11, 2011 at 6:04 am
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……..
Leave a Reply
Search
Social Media
dodozhang21 @ facebook
dodozhang21 @ twitterMy most adorable Pomeranians
- You Know It's Love When
- jQuery session timeout countdown with jQueryUI dialog
- ICHC selection
- Smile Quotes
- jQueryUI dialog as loading screen (replace blockUI)
- Wordpress Theme: oriental
- IE input background image issue
- How to STYLE a table using CSS (JSF examples)
- jQuery plugin - tableRowCheckboxToggle
- Simple PHP URL rewrite
- pureessence: There is no code in there. It's just a url you call to keep your session alive. Whatever it is for your application. It's only an example.
- karls: Thank you for this nice example! i already embedded in my app.
- Darwin Santos: Could you please post the source code of keeAlive.php?
March 4, 2008 at 9:42 am
i fixed this issue by setting background-attachment to fixed for IE6 and IE7.