[thelist] zindex problem

Lee Kowalkowski lee.kowalkowski at googlemail.com
Wed Apr 11 03:07:53 CDT 2007

On 10/04/07, Matt Warden <mwarden at gmail.com> wrote:
> I cannot reproduce this issue on any browser except IE 6.0.2800.1106.
> I have IE 6.0.2900.2180 on my laptop and the issue is not present.

I have a IE 6.0.2800.1106CO.

> Has anyone seen this before -- a text box bleeding through a div?

It looks more like the text box is on top of the div, but with
background:none.  Difficult to say without seeing the code, but I'd
guess you have something like:

  background:url(selectButton.gif) no-repeat right center;

...instead of:

  background:#fff url(selectButton.gif) no-repeat right center;

Assuming the drop-down div is positioned (absolute), the text box can
only be over the top of that div if the text box is also positioned
(absolute or relative) or the drop-down has a negative z-index

Non-positioned elements have a "z-index" equivalent to 0, but
positioned elements will always be on top unless negative.

> Could this be caused by equal z-index values? Another issue?

Yes, if both are positioned and the drop-down appears before the text
box in the HTML/DOM.

Difficult to say without seeing your code, but it looks like you need
to put your text boxes in a different z-plane than your div if this is
the case (or just have non-positioned text boxes).

Hopefully not too speculative...


More information about the thelist mailing list