CODEWITHSUNDEEP
css
Paul
Paul

Reputation: 3954

CSS z-index bug in IE with two input elements

I'm trying to place two inputs on top of eachother. The top one is active and has a transparent background, the bottom one is disabled:

<div id="autotest-wrap">
    <input id="autotest" value="ab" />
    <input id="autotest-sugg" value="abc" disabled />
</div>

#autotest {
    background-color: transparent;
    position: absolute;
    z-index: 10;
}
#autotest-sugg {
    position: absolute;
    z-index: 1;
}​

This hits the IE z-index bug. In IE the disabled one is on top, despite the z-index. I'm having trouble working out the solution. I setup a fiddle with an example. Could someone please provide an explanation of how to work around this bug?

Thanks!

Upvotes: 0

Views: 87

Answers (1)

shaunsantacruz
shaunsantacruz

Reputation: 8930

IE8 doesn't like background-color: transparent. It's a known bug.

The workaround is to use a transparent image:

background: url('path/to/1px-transparent.gif')

Fiddle

Upvotes: 1

Related Questions