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?
