467,920 Members | 1,248 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 467,920 developers. It's quick & easy.

Nested DIVs and partial transparency


I have a page with six or seven absolutely positioned DIV blocks ... they
all contain form elements .. text boxes, buttons, etc. and they all reside
within a containing "master" DIV. What I need to do is overlay all of the
DIVs with a "pop-up" DIV to get some additional input; so, on a button
click I am setting the visibility and the top/left coordinates to bring it
into position ... but what's happening is that three elements underneath are
still visible through the "pop-up DIV" block ... the pop-up has a
background-color set and its z-index is higher than any other element on the
page ...

Can anyone give me any ideas what might be going on here ? Right now I'm
completely stuck ...

TIA

L

Oct 24 '06 #1
  • viewed: 2146
Share:
2 Replies
Ben Wall wrote:
I have a page with six or seven absolutely positioned DIV blocks ... they
all contain form elements .. text boxes, buttons, etc. and they all reside
within a containing "master" DIV. What I need to do is overlay all of the
DIVs with a "pop-up" DIV to get some additional input; so, on a button
click I am setting the visibility and the top/left coordinates to bring it
into position ... but what's happening is that three elements underneath are
still visible through the "pop-up DIV" block ... the pop-up has a
background-color set and its z-index is higher than any other element on the
page ...

Can anyone give me any ideas what might be going on here ? Right now I'm
completely stuck ...
Browser bugs.

In IE the select element is probably showing through. In Firefox the
scroll bars underneath show through the popup.

For the Firefox problem you can set overflow:auto to stop the show
through of the scroll bar. Apparently this bug has been known in the
Firefox world for many years. The overflow:auto trick doesn't seem to
work in all cases but it might in your case. However you need a better
fix in IE that will solve this problem anyway.

In IE it seems the fix to stop the select elements from showing though
is to place an iframe element between the popup and what is showing
through from below. The iframe is the same size as the popup and
probably is positioned with a lower z-index than the popup. The iframe
seems to be an impenetrable element and nothing shows through. So this
fixes the Firefox problem also.

The Yahoo! UI container class does this iframe trick.

So this is the information that I have gathered but I haven't done this
yet. However I want to do it this week. What I haven't figured out is
what to put in that iframe or where to point it's src attribute. Anyone
know this part? Strangely if I leave the iframe source attribute out it
fills with www.yahoo.com content and I have no idea why and that is not
my browser's homepage. (I'm not using Yahoo! UI for this.)

Peter

Oct 24 '06 #2
Liz

thank you ! it is indeed a <SELECTshowing through ... I can't handle that
IFRAME workaround but I did come up with another: set the display to "none"
on the <SELECTwhen the DIV pops up and back to "inline" when it "pops
down" ...

the other two elements were a (really stupid) problem with my code ... but
you got me on track here ...

L

"Peter Michaux" <pe**********@gmail.comwrote in message
news:11**********************@e3g2000cwe.googlegro ups.com...
Ben Wall wrote:
>I have a page with six or seven absolutely positioned DIV blocks ... they
all contain form elements .. text boxes, buttons, etc. and they all
reside
within a containing "master" DIV. What I need to do is overlay all of the
DIVs with a "pop-up" DIV to get some additional input; so, on a button
click I am setting the visibility and the top/left coordinates to bring
it
into position ... but what's happening is that three elements underneath
are
still visible through the "pop-up DIV" block ... the pop-up has a
background-color set and its z-index is higher than any other element on
the
page ...

Can anyone give me any ideas what might be going on here ? Right now I'm
completely stuck ...

Browser bugs.

In IE the select element is probably showing through. In Firefox the
scroll bars underneath show through the popup.

For the Firefox problem you can set overflow:auto to stop the show
through of the scroll bar. Apparently this bug has been known in the
Firefox world for many years. The overflow:auto trick doesn't seem to
work in all cases but it might in your case. However you need a better
fix in IE that will solve this problem anyway.

In IE it seems the fix to stop the select elements from showing though
is to place an iframe element between the popup and what is showing
through from below. The iframe is the same size as the popup and
probably is positioned with a lower z-index than the popup. The iframe
seems to be an impenetrable element and nothing shows through. So this
fixes the Firefox problem also.

The Yahoo! UI container class does this iframe trick.

So this is the information that I have gathered but I haven't done this
yet. However I want to do it this week. What I haven't figured out is
what to put in that iframe or where to point it's src attribute. Anyone
know this part? Strangely if I leave the iframe source attribute out it
fills with www.yahoo.com content and I have no idea why and that is not
my browser's homepage. (I'm not using Yahoo! UI for this.)

Peter

Oct 24 '06 #3

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

9 posts views Thread by Dustin | last post: by
5 posts views Thread by Markus Ernst | last post: by
2 posts views Thread by Guadala Harry | last post: by
4 posts views Thread by D | last post: by
2 posts views Thread by Ben C. | last post: by
2 posts views Thread by Mike | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.