[thelist] zindex problem

Matt Warden mwarden at gmail.com
Wed Apr 11 12:55:22 CDT 2007


On 4/11/07, Lee Kowalkowski <lee.kowalkowski at googlemail.com> wrote:
> > 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;

You are correct. And when I add the background as you suggest, there
is no longer a bleed through of the div contents into the textbox. But
I need it the other way around! The div does have a background color,
but obviously it is "under" the text box later down in the page.

> 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
> (unlikely).

Yes, the input is also absolutely positioned.

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

Ok, how do I do this? Setting explicit z-index is not doing it:

input: position=absolute, z-index=9049
"dropdown" div container: position=absolute, z-index=9051
"dropdown" content div: position=absolute, z-index=9052

I could try and show you the code if you really want to, but I don't
think it's going to help much. These elements are being created by
some pretty complex JavaScript code and it would take a while to dig
down into it. I guess if this msg doesn't help, I could spend some
time to create a static version of only CSS and markup (a page
basically frozen like the screenshot I provided).

-- 
Matt Warden
Cleveland, OH, USA
http://mattwarden.com


This email proudly and graciously contributes to entropy.



More information about the thelist mailing list