div overlay for blocking clickable events iframe not working in IE

Question

I have an Iframe displaying webpages and I need to block all click events for that page. I used the following code

 <div id="IframeWrapper" style="position: relative;">
    <div id="iframeBlocker" style="position: absolute; top: 0; left: 0; width:95%; height:95%;z-index:2"></div>
     <iframe  id="iframewebpage" style="z-index:1"  runat="server"></iframe>
    </div>

This works fine for all browsers except IE( both 8 and 9). any workarounds ?

Answer 1

Not sure why the above doesn't work, the theory all looks correct to me, but when setting the background it appears to render the div successfully. Although the below code will not allow you to use the scrollbars either on the iframe it should be an OK starting point. I've removed the z-index as rendering the blocker after the iframe means it will be rendered "on top" of it.

<div id="IframeWrapper" style="position: relative;">
    <iframe  id="iframewebpage" style="z-index:1"  runat="server" src="http://www.w3schools.com" ></iframe>
    <div id="iframeBlocker" style="position:absolute; top: 0; left: 0; width:95%; height:95%;background-color:aliceblue;opacity:0.1;"></div>
</div>

Answer 2

On the div containing "position: absolute", you need to add these styles:

{
  background-color: white;
  opacity: 0;
}

Yeah, IE is always weird.