Ignored z-index with IFrame. Drop down menu hidden.

Question

In Internet Explorer only (Works fine in Chrome and Firefox), it always puts a PDF displayed in an iFrame over top of any other objects on the page. I have a horizontal menu above that has drop down menus that become hidden behind.

I have tried forcing the site in IE9 mode, z-index on all items and parent items, adding wmode = to transparent or opaque.

This only happens when a pdf is loaded in the iframe. If a webpage is loaded, the menu appears over top as it should.

IE Example of menu dropdown hidden

CSS:

iframe
{
  position: relative;
  z-index: 0;
}

#Standings_Container
{
    float:left;
    text-align: center;
    width: 100%;
    z-index: 0;
    position: relative;
}

#nav .Menu_Child {
    display:none;
    position:absolute;
    left:0;
    top:26px;
    height:auto;
    float:left;
    width:174px;
    overflow:hidden;
    z-index: 10000;
}

HTML:

<div class="Menu_Child">
  <ul>
     <li><a href="#">Applications</a></li>
     <hr class="Menu_Child_HR" />
     <li><a href="#">Schedules</a></li>
     <hr class="Menu_Child_HR" />
     <li><a href="#">Standings</a></li>
     <hr class="Menu_Child_HR" />
     <li><a href="#">Rules</a></li>
     <hr class="Menu_Child_HR" />
     <li><a href="#">Sponsors</a></li>
     <hr class="Menu_Child_HR" />
     <li><a href="#">Gym/Field Directions</a></li>
     <hr class="Menu_Child_HR" />
     <li><a href="#">Register Online</a></li>
  </ul>
</div>

<div id="Standings_Container">
  <iframe style="margin-top:8px;" scrolling="yes" width="850" height="600" src="[PDF URL]"></iframe>
</div>

Try adding a z-index (higher than the `.Menu_Child`) to `#nav`. Could be one of IE's many z-index bugs. — Michael Dunlap, Jan 22 '14 at 23:15
@DigitalD i tried this, but it still didnt work. i also noticed this only happens when a pdf is loaded into the iframe. if a webpage is loaded into it, the menu appears overtop the iframe correctly. — the sandman, Jan 22 '14 at 23:21
This may be a duplicate of this: http://stackoverflow.com/questions/12911428/z-index-does-not-work-in-ie7-ie8-with-pdf-in-iframe then — Michael Dunlap, Jan 22 '14 at 23:48

score 1 · Answer 1 · answered Apr 16 '14 at 22:38

I have come across this so many times, and unfortunately, it seems to be a limitation of the way IE (specifically the Adobe Windows PDF plug-in) renders the PDF. It basically generated it last, over every other element on the page.

Whereas Flash embedded objects could overcome this using the wmode="transparent", this is not the same with the PDF plugin. I will try to play around with the windowless or windowed parameter, but I am certain I already tried this.

Unfortunately for myself, and others, shifting the PDF lower and/or widening the gap below the navigation is not an option.

Seems to me, but I could be wrong, that Adobe need to revisit the way IE handles PDF or Microsoft to use a different rendering engine.

fabio

score -1 · Accepted Answer · answered Jan 23 '14 at 18:53

After a week of trying different solutions and fixes, i couldnt find anything that would work for my specific situation. Instead i just made the vertical spacing on my sub menus much shorter and pushed the pdf in the iframe further down on the page so the drop down menus never overlap.

Ignored z-index with IFrame. Drop down menu hidden.

2 Answers2