When loading an external page with an applet in an iframe, I encountered an issue with displaying a floating div above the iframe. Setting position relative or absolute on the containing divs and a higher z-index on the floating div worked in Firefox, but not in Chrome or IE. Both Chrome and IE rendered the floating div below the applet.
I'm looking for any advice or pointers on how to resolve this issue.
Interestingly, if the page loaded in the iframe does not have an applet, then the floating div displays correctly.
I've tried placing the div at the same level as the applet and giving it a higher z-index, which seems to work, but unfortunately, I cannot modify the external page that I load.
My code looks something like this:
<div id="div1" style="position: absolute; z-index:1;">
<iframe src="http://xyz...." width="400" height="200" ></iframe>
</div>
<div id="div2" style="position: absolute; top:20; z-index:5">
Floating div content
</div>