Comments on: IE input background image issue

By: Vinay Patial

Vinay Patial — Fri, 11 Nov 2011 06:04:30 +0000

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

By: Geby

Geby — Sat, 06 Aug 2011 12:36:55 +0000

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

By: Geby

Geby — Sat, 06 Aug 2011 12:33:18 +0000

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
——————————————————————————————-

By: Priyank K.

Priyank K. — Tue, 05 Jul 2011 10:35:21 +0000

Grea this worKs.

ThanKs!!

By: Todd

Todd — Wed, 05 Jan 2011 18:25:43 +0000

Background position bottom right worked for me once I tweaked my widths to match. Thanks for the suggestion Dennis.

By: Daniel

Daniel — Wed, 07 Jul 2010 10:01:24 +0000

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?

By: MArk

MArk — Mon, 07 Jun 2010 09:45:52 +0000

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.

By: yajra

yajra — Fri, 08 Jan 2010 03:14:27 +0000

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

By: Noah

Noah — Wed, 14 Oct 2009 19:02:54 +0000

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

By: Rachel

Rachel — Fri, 01 May 2009 02:30:22 +0000

Great script, but what about for text areas?