Question

I’m trying to create an invisible div, over the facebook comments plugin in order to disable the plugin’s functionality in an Editor View. 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>

Try in IE8:

http://jsfiddle.net/pkbz4/19/

• The above code works in ALL other Major browsers. WTF Microsoft?

Stylesheet:

    #container {
        width: 100%;
        height: 100%;
        position: relative;
    }

    #navi, 
    #coveriframe {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
    }

    #coveriframe {
        z-index: 10;
   }

Answer 1

I’ve done this several times in IE8. The solution that works for me is to assign a background color to the div and then set opacity to 0. IE8 then recognizes the div as “existing” above the rest of the content. I also find setting position: absolute and all four directions to 0 is more reliable than 100% width and height. Like this:

#coveriframe {
  position: absolute;
  top: 0; 
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3007;
  background: #fff;
  filter: alpha(opacity=0);
  opacity: 0;
}

Here’s my update to your jsfiddle: http://jsfiddle.net/pkbz4/21/