IE6 select box problem

#1

I trying to build a web page with some dynamic content. Part of that
is an autocomplete box that needs to appear under a text box on a
form.

The problem is that the box will not draw on top of a select box no
matter what I set the z-indexes to.

(It works under safari and firefox and IE 7. Just not IE6).

There is a simple example using just css below. Is there a workaround
to get an element to draw on top of a select box in IE6?

Thanks

<html>
<head>
<style type="text/css">
span{
position: absolute;
background-color: yellow;
padding: 5px;
left: 10px;
border: 1px dashed gray;
visibility: visible;
color: black;
text-decoration: none;
z-index:100;
}
</style>
</head>
<select style="z-index:-1;position: absolute;">
<option>option 1</option>
<option>option 2</option>
<option>option 3</option>
<option>option 4</option>
</select>
<span>Test Test Test<br/>I should cover the select box <br/></span>
</html>

#2

Mark Smith wrote:

Quote:

I trying to build a web page with some dynamic content. Part of that
is an autocomplete box that needs to appear under a text box on a
form.

The problem is that the box will not draw on top of a select box no
matter what I set the z-indexes to.

(It works under safari and firefox and IE 7. Just not IE6).

Hmmm, I didn't know that this had changed in more recent browsers.

Historically all browsers made any form element appear on top.
Apparently, this has been in "fixed" in late model browsers.

So, the answer to your question, is that you will have to wait for
IE6 to die, there is nothing else you can do.

Jeff

Quote:

There is a simple example using just css below. Is there a workaround
to get an element to draw on top of a select box in IE6?

Thanks

html
head
style type="text/css"
span{
position: absolute;
background-color: yellow;
padding: 5px;
left: 10px;
border: 1px dashed gray;
visibility: visible;
color: black;
text-decoration: none;
z-index:100;
}
/style
/head
select style="z-index:-1;position: absolute;"
<option>option 1</option
<option>option 2</option
<option>option 3</option
<option>option 4</option
/select
<span>Test Test Test<br/>I should cover the select box <br/></span
/html

#3

Mark Smith meinte:

Quote:

I trying to build a web page with some dynamic content. Part of that
is an autocomplete box that needs to appear under a text box on a
form.

The problem is that the box will not draw on top of a select box no
matter what I set the z-indexes to.

[snip]

IIRC you need to wrap top layers in an iframe...

Anyway:

http://lmgtfy.com/?q=internet+explorer+select+box+bleed+through

Gregor

--
http://www.gregorkofler.com
http://web.gregorkofler.com - vxJS, a JS lib in progress

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

IE6 select box problem

Cascading Style Sheets Layout/presentation on the WWW (comp.infosystems.www.authoring.stylesheets)

IE6 select box problem - 06-08-2009 , 07:30 AM

Re: IE6 select box problem - 06-08-2009 , 08:14 AM

Re: IE6 select box problem - 06-08-2009 , 11:04 AM