Embedding PDFs or other content into websites and web apps has become commonplace. Inevitably you will want to have menus that drop down over those PDFs or have some other element that can overlay the iframe that you place the PDF in.

Most browsers understand this desire and are happy to accommodate. Unfortunately, Internet Explorer in its many versions still does not handle this.

The Problem

IE renders an iframe over the rest of the content so that your other elements end up behind the PDF. This is especially troublesome for drop down menus like below.

Dropdown before loading iframe

Dropdown after loading iframe

The Solution

Other sites go on about positioning and z-indexes, but that is not going to solve your problem. The answer is a one line fix.

You must insert an empty iframe next to the element that needs to be on top of the real iframe. That’s all – see the example below if it sounds odd.

For whatever reason, adding multiple iframes forces IE to stack them properly and respect the z-indexes. This has been tested in IE 7, 8, 9, and 10.

Solid Tip: Check out this JS Fiddlein Internet Explorer to see it in action!

Update 05/24/2016: The JS Fiddle no longer loads the PDF in Internet Explorer. Here is an alternate test page I loaded up here at SolidlyStated.

The Example

<divid="container"><divid="menu">place some content here that goes over the div</div><iframeid="fake"src="about:blank"></iframe></div><iframeid="pdf"src="http://stlab.adobe.com/wiki/images/d/d3/Test.pdf"width="400"height="200"></iframe>

William- that JS Fiddle actually NO LONGER works correctly in IE. The test PDF from Adobe no longer loads its content, even though the file hasn’t moved. Maybe a security issue. Works in other browsers just fine.

I created the test page locally with both those HTML and the PDF itself hosted here at SolidlyStated. Even IE Edge still has the problem and I am sure Microsoft is not going to do anything about it.

Not sure when it started, but I had to overcome it at the beginning of 2014. I discovered it on accident after many hours of struggling. I was attempting to use JS to build it dynamically and populate the iframe element and discovered that an empty iframe somehow made the renderer work as we intended. Client was very pleased.

Thanks, works well, as long as your menu is not fixed, that is my case. My menu bar is fixed top, so when I scroll the page the iframe with the pdf gets below it, but for some reason the area that matches between the menu and the iframe creates a white flash. Sadly I can’t give a live example of it. I think that both iframes are struggling for been on the top. I rely appreciate some help or advice.