Invisible div over div does not work in IE8 - css

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/

Answer 2

CSS Specification says:
The percentage is calculated with respect to the height of the
generated box's containing block. If the height of the containing
block is not specified explicitly (i.e., it depends on content
height), and this element is not absolutely positioned, the value
computes to 'auto'.
Basically, In older versions of IE (including IE8) percentage heights are based on the height of the parent element. If the parent element doesn't have an explicit height, the percentage is ignored and set to Auto (in this case, 0px).
So, to fix this, you'll either want to explicitly set the height/width of #coveriframe or its parent. One thing you could try is setting the height of html and body to 100% (I'm assuming those are the parent elements).
html, body { height:100%; }
#container {
width: 100%;
height: 100%;
position: relative;
}
#navi,
#coveriframe {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
#coveriframe {
z-index: 10;
}

Answer 3

why did you want to do in javascript and it works well in all browsers, I'll let my example I hope you work:
-----------------DIV-----------------
<div id="div1" style="display: block;">
<div class="mainbody">
<br />
</div></div>
-----------------JavaScript----------------
function showHideDiv(divX) {
if (divX == "1") {
document.getElementById("div1").style.visibility = "visible";
document.getElementById("div2").style.visibility = "hidden";
}
-----------------button HTML----------------
<li>click_Aqui</li>

Answer 4

The problem is that internet explorer up to ie9 doesn't recognize the mouse hover when hovered over a transparent background. Zach Shipley answer offers a good solutions.
But in case you want to add a border or an element to the transparent div or text the easiest way of doing this is by adding a 1px transparent png as background.
#coveriframe {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 3007;
background-image: url("pixel-transparent.png");
}

Answer 5

Make sure that you are putting fixed height & width to that DIV.
As Shaquin Trifonoff mentioned above sometimes 100% or any length in % may not work onIE8. Always I am trying to avoid % in such situation.
Code snippet :-
html,body{ //This makes your page expandable as per screen resolution
height:100%;
}
#your-hide-div{
height:100px;
width: 100px;
display:block;
}