iframe PDF z-index Mozilla vs. IE6

Poster: pbowers
Dated: Wednesday October 29 2003 - 23:11:33 GMT

I'm able to get the menu items to appear over an iframe PDF document for IE6, but with Mozilla/Firebird it blows away the page title:

http://www.fluidedesign.com/embedded_pdf_example2.htm

The example below renders correctly in Moz/FB, but in IE6 the menu items display under the iframe:

http://www.fluidedesign.com/embedded_pdf_example.htm

The difference between the two files is the z-index for the main page content being set to -100 for example2.htm.

Maybe this is just a CSS issue I'm overlooking and not related to the Milonic Menu, but has anyone seen/solved this problem before?

I've read and tried implementing the fixes in the related topics on this forum, but nothing seems to work.

Paul

Poster: kevin3442
Dated: Thursday October 30 2003 - 7:51:41 GMT

Hi Paul,

Very odd indeed. First impressions:

(1) Normally, IE6 doesn't have a problem displaying the menus (or other dhtml) over an iframe, because iframes became "windowless" in ie5.5+. To see this on your end, try putting something other than a .pdf in the iframe, in embedded_pdf_example.htm (or just rename the src .pdf so that the file isn't found) and you should see the difference. Your menus will probably appear over the iframe now. That tells me that it's likely to be a problem specific to the embedded .pdf.

(2) The ".pdf is the problem" idea is further reinforced in what's left of my mind when I remove the .css in a local example (your code used on my HD). Have you niticed that in your embedded_pdf_example2.htm, the submenus menu flicker pretty badly as you traverse the main menu or across items in a submenu? It's as if the .pdf is trying to break through the menu with each little movement of the mouse (even if you turn off the filters so that there's no transparency in ie). I noticed the flicker on your example2 page, as well as in the local example I messed with. I experimented with a page of my own, embedding a .pdf in an iframe, and placing a menu near it, with no other code or content on the page. I used the same sort of iframe size as yours. Same flickering problem. But, I observed that the flickering only occurs if the iframe extends beyond the browser window. If I resize the iframe or the browser window so that the iframe fits completely within the window, then no flickering. If I then resize the window to cut off the iframe, I get flickering. It's like the .pdf wants to be on top very badly. I don't know if this is a general interaction between .pdf and dhtml, or if it is specific to the menu system. I suppose one could test by playing with some simple floating boxes.

(3) I see that you're trying to move the iframe back by setting its z-index in the opening tag.

I'm no expert on iframes and z-indexes, but I don't know if you can set an iframe's z-index as a straight attribute. Instead, I think you might want to try


(4) I don't know if hidediv is implemented yet in the menu system. It is supposed to be at some point, but I don't know when. In any case, I notice in your menu_data.js that you have hidediv="pdf"; but that the div containing your iframe has id="content". It's actually the iframe that you've given id="pdf". To hide the div, you'd probably want to try hidediv="content". After writing all that, I just did a quick search through the menu scripts and did not find hidediv. It used to be in milonic_src.js, up through RC18, but just as a sort of place holder. Nothing was done with it yet. It has disappeared from RC19, which I actually take to be a good omen (i.e., Andy must be working on it). You could also check out this thread for some div hiding ideas.

(5) Have you tried embedding the pdf using an <embed> or <object> tag? Of course, then there are differences between various flavors of ie and ns to worry about. But you could always code around that, if the embed or object tag gets rid of the pdf layering problem in ie for you.

(6) A hair-brained idea, but maybe try this: create another htm page, so that all it does is use the body's onload event to change the document.location to the pdf file. Then, instead of loading the pdf file into the other pages' iframe directly, try loading the new htm file, which will then load the pdf. Maybe that'll give you some sort of buffer (but probably not... as I said, a hair-brained idea.) If it worked though, you could easily create a general "buffer" page and pass the name of the .pdf file as a query to it in the url.

(7) You know, the sad truth is that, even if you do conquer this problem, iframes will still probably present layering difficulties for you in other browsers where iframes are unresponsive to layering relative to windowless elements. Then again, maybe you're targeting just a few browsers...

It's late, so I better quit before my ideas get any whackier.

Cheers,

Kevin

Poster: pbowers
Dated: Thursday October 30 2003 - 8:30:48 GMT

Wow, it looks like I have a lot to munch on and try. Thanks very much for the time you spent looking at the problem.

I'll probably end up ditching the idea, as it was only a proposal to the client. If it causes this much extra work, it's not worth the extra 2 hours dev time on an already me-lose-money project.

Cheers,

Paul