Re: Works in IE7, works in IE8 compat mode, fails in IE8
I am still having the issue with the content scrolls right out of its PIE-generated background when the parent is a div with overflow:auto. It does not work in IE 8 or 9 any help is greatly appreciated.
<html>
<head>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="PIE_uncompressed.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
$('.boxTest').each(function() {
PIE.attach(this);
});
});
</script>
<style type="text/css">
.container{
position:relative;
z-index:0;
height:200px;
width:700px;
overflow:auto;
}
.floatedContainer{
float:left;
margin-left:10px;
margin-bottom:10px;
}
.boxTest{
position:relative;
border: 1px solid #696;
padding: 60px 0;
text-align: center;
width: 200px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: #666 0px 6px 1px;
-moz-box-shadow: #666 0px 6px 1px;
box-shadow: #666 0px 6px 1px;
background: #EEFF99;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#EEFF99), to(#66EE33));
background: -webkit-linear-gradient(#EEFF99, #66EE33);
background: -moz-linear-gradient(#EEFF99, #66EE33);
background: -ms-linear-gradient(#EEFF99, #66EE33);
background: -o-linear-gradient(#EEFF99, #66EE33);
background: linear-gradient(#EEFF99, #66EE33);
-pie-background: linear-gradient(#EEFF99, #66EE33);
}
.inner{
position:relative;
}
</style>
</head>
<body>
<div class="container">
<div class="floatedContainer">
<div class="boxTest">
<div class="inner"> box 1 </div>
</div>
</div>
<div class="floatedContainer">
<div class="boxTest">
<div class="inner"> box 2 </div>
</div>
</div>
<div class="floatedContainer">
<div class="boxTest">
<div class="inner"> box 3 </div>
</div>
</div>
<div class="floatedContainer">
<div class="boxTest">
<div class="inner"> box 4 </div>
</div>
</div>
<div class="floatedContainer">
<div class="boxTest">
<div class="inner"> box 5 </div>
</div>
</div>
<div class="floatedContainer">
<div class="boxTest">
<div class="inner"> box 6 </div>
</div>
</div>
<div>
</body>
</html>
Forums
