Problem with opacity in IE8
I am trying to solve a problem that appears in IE8. Html is very simple:
<div id="overlay">
</div>
<div id="imgcontainer">
<div>
<div id="source">
</div>
</div>
</div>
When I set (using jQuery) the opacity of the "#source" element with "0" in IE, I can see the background #overlay and not #imgcontainer> div, but why? There is javascript code:
$(function(){
$("#source").css({
opacity: "0",
});
$("#overlay").css({
width: $(window).width(),
height: $(window).height(),
display: "block",
opacity: "0.6"
});
$("#imgcontainer").css({
zIndex: 2,
position: "fixed",
opacity: "1",
left: "0",
right: "0",
top: "100px",
display: "block"
});
});
You can try a live example on jsFiddle .
<D> UPD:
After some experimentation, I found a solution. This is really a html \ css problem, so I did some code refactoring and removed the jQuery tag. Imagine we have this html mut:
<body>
<div id="d1">
<div id="d2">
<div id="d3">
</div>
</div>
</div>
</body>
and css styles:
body {
background-color: #c8c8c8;
}
#d1 {
background-color: #6c0922;
width: 500px;
border: 1px solid black;
filter: alpha(opacity = 100);
}
#d2 {
background-color: #146122;
width: 350px;
margin: 20px auto;
border: 1px solid black;
}
#d3 {
background-color: #0080c0;
height: 100px;
margin: 10px 65px;
filter: alpha(opacity = 0);
zoom: 1;
}
, , #d3 , #d2 (-). IE7\8. IE () #d2 #d1. #d1 . filter: alpha(opacity = 100);, .
- opacity = 1 , ? :). , - . .
+3
2
. , IE8 css . CSS, IE8:
#loading-div-background {
display:none;
position:absolute;
top:0;
left:0;
background:gray;
width:100%;
height:100%;
/* Next 2 lines IE8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=75);
}
- : , : .
+7