Tyanna
Tyanna

Reputation: 719

Embedded PDF overlapping menu in FireFox

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.

Upvotes: 3

Views: 4446

Answers (3)

LordZardeck
LordZardeck

Reputation: 8283

I had the same problem. I fixed it by hiding the report when the user clicked the drop down menu, then showing it again when the menu was hidden. It's mostly a hack, but it works and allows me to have both my embedded report and my drop-down menu.

Upvotes: 0

Parth
Parth

Reputation: 36

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.

Upvotes: 2

Have you check in Firebug at all instances that the z-index of your menu and pdf containers remain constant? When I say instances I mean when the user interacts with the menu and whatnot.

Or perhaps it's a CSS overflow issue? Just throwing things out.

Upvotes: 0

Related Questions