CSS hover menu appearing behind pdf iframe

Question

I am working on a web application that has a menu across the top of every page with sub menus that drop down when a menu item is hovered over. This works fine, except on one page where we are trying to show a pdf in an iframe. The hover menus all end up behind the iframe in this one case. I have tried adjusting the z-index of both the hover menu and the iframe but neither seems to work. This is occurring in both FireFox 3.5 and IE8 so far.

There are two ways my question could be solved. I can either find a way to accurately adjust the CSS so my menu appears in front of the iframe or if there is another way to show the pdf that doesn't have this issue I could do that too.

Thanks!

Answer 1

This is likely because PDFs are displayed in a plugin, rather than natively in the web browser. CSS will not have an effect on this, because CSS only applies to content rendered in the web browser. Google does have a system that converts PDFs to HTML for display in browsers, at which point there would be no z-index issues, but some formatting may be lost in the process, and of course it is no longer a PDF document. Unless there is some way to tell the PDF plugin itself to lower its z-index (and consider that not all users will be using the Adobe plugin, some may use Foxit or other programs) you may be out of luck.

Answer 2

You're showing a pdf in an iframe? I'm guessing it has some sort of flash viewer? If so, then make sure you set the wmode of the flash embed code appropriately.

http://kb2.adobe.com/cps/155/tn_15523.html

Answer 3

When I ran into this issue, I used jQuery to detach the iframe before showing the overlay (and in my case a modal too). Once the user was done with the modal/overlay, I reattached the iframe to the DOM. _viewerFrame and _viewerDiv are just some css selectors of course. In my case there was a wrapping div tag around the iframe element that made detaching and attaching easy.

// detach iframe
_frame = $(_viewerFrame).detach();

function reattach(frame) {
    // append it back to the div it was in (reattaching essentially)
    $(_viewerDiv).append(frame);
    setButtonStates();
    setViewerState();
}

function onOk() {

     ... // other code

     reattach(_frame);
}

function onCancel() {

     ... // other code

     reattach(_frame);
}

// show modal with overlay
Dialog.confirm(onOk, onCancel, { ...

Hope that helps...

Answer 4

Try position:relative and z-index adjustment to get it in front of the iframe.