Forums
View unanswered posts | View active topics It is currently Tue Jul 29, 2014 2:53 pm



Reply to topic  [ 13 posts ]  Go to page Previous  1, 2
 Works in IE7, works in IE8 compat mode, fails in IE8 
Author Message

Joined: Wed Jul 28, 2010 1:46 pm
Posts: 1
Post Re: Works in IE7, works in IE8 compat mode, fails in IE8
I've not found luck with getting the RGBA alpha value to work in IE8, but as a workaround, if the background color permits, you can use the -pie-box-shadow override and calculate the color with the opacity applied.

Code:
.shadowBox {
    -moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, .1);
    -webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, .1);
    -pie-box-shadow: 1px 1px 2px rgb(230, 230, 230);
    box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
}


Wed Jul 28, 2010 2:01 pm
Profile

Joined: Thu Sep 20, 2012 3:11 pm
Posts: 1
Post 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>


Thu Sep 20, 2012 3:16 pm
Profile

Joined: Tue Oct 16, 2012 4:56 am
Posts: 1
Post Re: Works in IE7, works in IE8 compat mode, fails in IE8
jason wrote:
position:relative and z-index:0,


The first of those two brought back corner-radiused borders on my text inputs in ie8. The author should do a paragraph on these techniques (or an update to make them unnecessary!)

Thanks to the author, thanks to the forum. Back to work!


Tue Oct 16, 2012 5:01 am
Profile
Display posts from previous:  Sort by  
Reply to topic   [ 13 posts ]  Go to page Previous  1, 2

Who is online

Users browsing this forum: Baidu [Spider], Bing [Bot], TurnitinBot [Bot] and 2 guests


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group.
Designed by STSoftware for PTF.