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?