opacity in ie using absolutely positioned divs not working
Posted
by camomileCase
on Stack Overflow
See other posts from Stack Overflow
or by camomileCase
Published on 2009-10-14T23:31:26Z
Indexed on
2010/04/05
23:03 UTC
Read the original article
Hit count: 240
I've been banging my head against the wall for a few hours how trying to sort this out. I'm trying to position one div on top of another for the purpose of fading one in on top of the other. The divs will have an image and some other html in them. I cannot get opacity to work in ie8. I've simplified my html as much as possible:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style>
* { margin: 0; padding: 0; }
.carousel-container {
position: relative;
}
.carousel-overlay {
position: absolute;
}
#carousel-container-a {
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
}
#carousel-container-b {
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
}
h1 { font-size: 100px; }
</style>
</head>
<body>
<div id="carousel-container-a" class="carousel-container">
<div class="carousel-overlay" style="left: 10px; top: 10px;">
<h1 style="color: black;">Showcase</h1>
</div>
<!-- other elements removed for simplicity -->
</div>
<div id="carousel-container-b" class="carousel-container">
<div class="carousel-overlay" style="left: 20px; top: 20px;">
<h1 style="color: red;">Welcome</h1>
</div>
<!-- other elements removed for simplicity -->
</div>
</body>
</html>
Why doesn't the opacity work? How can I make it work?
© Stack Overflow or respective owner
