tags:

views:

795

answers:

8
+2  Q: 

Z-index issue?

I have a div with a z-index of 0 on the default page of a site and this default page contains a iframe.

One of the pages in this iframe has a popup with a z-index of 1000. However, the div still overshadows the popup in IE but works fine in Firefox

Does anyone know what I can do?

+1  A: 

Which version of IE?

I'm no javascript guru, but I think hiding the div when the popup pops might accomplish what you need.

I've had to work with divs and iframes when creating a javascript menu that should show overtop dropdown boxes and listboxes -- other menu implementations just hide these items whose default behavior in IE6 is to show on top of any DIV, no matter the z-index.

nathaniel
A: 

@nathaniel

I am using version 7.0 and my manager prefers that I dont hide the div because some of it is still visible but I may have to do that

jmein
The only solution/advise I found was to design the page in such a way that the divs are not overlapping. Hmmmm....
Frans
can you put the popup from the iframe in the parent window, and have the iframe tell the parent window to do the pop?
nathaniel
In my case the popup is in the parent window. So I don't think it will help.
Frans
+5  A: 

Explorer Z-index bug

In general, http://www.quirksmode.org/ is an excellent reference for this sort of thing.

moonshadow
+1  A: 

I face the same problem. The problem in my case is that the content in the iframe is not controlled by IE directly, but by Acrobat as it is a pdf file. You can try to show the iframe without the content, in which case the popup displays normally. For some reason IE is not able to control the z-index for external helpers.

It was tested with IE7

Frans
A: 

Without seeing a code snippet, it's hard to determine what the issue is. You may want to try appending an iframe under your popup that is the same size as your popup. With IE7 if you render the iframed popup after the other iframe has already loaded you should be able to cover up elements that are beneath. I believe some JS calendars and some lightbox/thickbox code does this if you are looking for examples.

+1  A: 

Without seeing your code, it's difficult to determine the problem. But it's worth noting that z-index only works when the element has been positioned (e.g. position: absolute;), so perhaps that could be an issue?

There's a good article on CSS Z-index from the Mozilla Developer Center.

Rich Adams
they are both positioned absolute so this is not the issue
jmein
A: 

never set your z-index to anything bellow 1 enless you want to hide it. I'm not sure about 7.0 but older versions of IE I've had issues with doing that. IE doesn't like z-index that much. Also check your positioning. Positioning may be your issue. sorry, i don't have enough info to help you further.

WalterJ89
A: 

@nathaniel

It would be best not to put the popup on the default page because it and its results also have to interact with a gridview that is on the page in the iframe that pops it

I think that I am going to hide the div because that seems to be the best solution and my manager does not mind that much anymore

jmein