[jQuery] FadeIn/Out position: relative in IE
Hello Everybody,
So here is my issue. I have a container element that I'm fading in and
out. It happens to have a child element that has position: relative.
In IE (6, 7, and 8), when the container is faded, the entire element
is opacity is changed except for the child element with position:
relative.
This is easily fixed in IE6 & 7 by adding position: relative to the
container element. This does not, however, solve the issue in IE8.
Does anyone know of a work around for this in IE8? Is there a better
solution for all of IE? Or is this perhaps a jQuery bug?
Thanks in advance! Here is a barebones example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Fade In/Out Test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/jquery/1.3.2/jquery.min.js"></script>
<style type="text/css">
* { margin: 0; padding: 0; }
body { padding: 40px; }
.container { width: 300px; margin-bottom: 16px; background-color:
#fff; border: 1px solid #999; }
.container_header { position: relative; background-color: #999;
padding: 4px; }
.container_inside { padding: 10px; }
.close { position: absolute; top: 0; right: 10px; }
</style>
<script type="text/javascript">
$(function() {
$("#tryit").click(function() {
$(".container").fadeOut();
});
})
</script>
</head>
<body>
<div class="container">
<h3 class="container_header">
Widget
<a href="#" class="close">Close</a>
</h3>
<div class="container_inside">
Some content. Lorem Ipsum Dolor Sit Amet
</div>
</div>
<button id="tryit">Try It</button>
</body>
</html>