Question

I’m pretty much at my wits end with this issue. I’ve been searching for a while and though I find many posts with people having the same issue as me, I’m not finding any answers or solutions to these posts.

The problem is this: We have a PDF viewer embedded on a report site. The user has the option to view the PDF in the browswer or to download it. We have a dropdown menu so the user can navigate to different reprots. The menu overlaps the PDF viewer when it drops down. In IE, it goes over the PDF viewer, as it should. In FireFox it goes behind the viewer and gets cut off.

Here is a code snipit:

<div style="position: relative; height: 347px; z-index: 1;" id="divPDF">
<span style="width: 100%; height: 100%;" id="PDFViewer1">
    <div>
        <object width="100%" height="100%" type="application/pdf" data="report.pdf#toolbar=1&amp;navpanes=0&amp;scrollbar=1&amp;view=FitH">
            <param name="wmode" value="opaque" />
            <embed src="report.pdf#toolbar=1&amp;navpanes=0&amp;scrollbar=1&amp;view=FitH" type="application/pdf" width="100%" height="100%" wmode="opaque"></embed> 
            <a href="report.pdf">Download PDF</a>
        </object>
    </div>
</span>  </div>

I have tried putting it in an iframe, but that didn’t work. I’ve tried setting the vmode to transparent, but that didn’t work either. (Is vmode even a valid param?) The z-index for the menu is 500.

Any suggestions would be greatly appreciated.

Thanks in advance.

Answer 1

This is known issue with the ’embed’ html tag & the way the adobe pdf renders the pdf . Currently Adobe does not support transparency tags like the flash files do ( wmode=transparent) kind of thing in the PDF rendering.