Invisible div over div does not work in IE8.
===

I'm trying to create an invisible div, over the facebook comments plugin. This invisible div works in all browsers except IE8. How can I fix this?

HTML:

    <div id="container">
       <div id="coveriframe"></div>   
        <div data-bind-component="fbml: fbml">(RENDER JS COMMENTS VIA KO)</div>
    </div>


  
Stylesheet:

    	#container {
    	    width: 100%;
    	    height: 100%;
    	    position: relative;
    	}
    
    	#navi, 
    	#coveriframe {
    	    width: 100%;
    	    height: 100%;
    	    position: absolute;
    	    top: 0;
    	    left: 0;
    	}
    
    	#coveriframe {
    	    z-index: 10;
       }