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?
