div on top of iframe work-around not working in Chrome

Question

I have a menu div that I'd like to display on top of a pdf in an iframe. The work-around I have found is to place an empty iframe behind the div. Works fine in Firefox/IE. Chrome still has the menu div behind the iframe. Oh, and I have the Adobe PDF plugin activated. Anyone have experience with this?

See the Fiddle

Answer 1

If you add it in as an object (with wmode) rather than as an iframe it seems to work fine in Chrome (FYI, I can confirm that it was not working correctly in my version of Chrome: Windows 7, Chrome 16). Try this:

<div id="objectContainer">
    <object id="pdfObject"  data="http://mirror.hmc.edu/ctan/macros/latex/contrib/pdfpages/dummy.pdf" type="application/pdf" width="600" height="500" style="z-index:1" wmode="opaque">
  alt : <a href="test.pdf">test.pdf</a>
</object>
</div>
<iframe id="emptyIframe" src="about:blank" frameborder="0">something</iframe>
<div id="menu">
    Menu
</div>

This also works in Firefox. However, you might run into problems with IE. I recommend you do a server-side browser detect and then output either the embedded object or iframe depending on the browser.