element with opacity gets behind iframe in firefox

[XarQuid]

I have an element (bar) positioned over an iframe, if i set an opacity on that element it stays under the iframe, even if that item has a bigger z-index than the iframe.However, if i create a container (foo) around that element and the iframe, and set the opacity there, the (bar) element stays in front of the iframe like intended.CSS:\[code\]#bar { width:100px; opacity:0.5; height: 150px; position:relative; top:100px; z-index:2; background:red}#foo { /* opacity:0.5; */ }\[/code\]HTML\[code\]<div id="foo"> <div id="bar"> <ul> <li>test</li> <li>test</li> <li>test</li> <li>test</li> <li>test</li> <li>test</li> </ul> </div> <iframe src="http://www.adelaide.edu.au/myuni/tutorials/docdesign/guides/docDesignGuide_KeepPDFsmall.pdf" width="200px" height="200px" frameborder="0" style="z-index:-1"></iframe></div>\[/code\]Creating that container would solve my problem, but i cannot do that because my current markup doesn't allow it. I would need the opacity to stay in the bar element.This only happens in Firefox, and the content of the iframe is a .pdf file.How can i get the bar element to stay on top of the iframe while maintaining its opacity setting?fiddle hereUPDATE:It seems the problem is related to the fact that i'm sourcing a pdf file instead of a webpage in the iframe.updated fiddleThanks in advance