Forums
|
|
Works in IE7, works in IE8 compat mode, fails in IE8
Author |
Message |
arcadian
Joined: Wed Jul 28, 2010 1:46 pm Posts: 1
|
 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 |
|
 |
smitty02001
Joined: Thu Sep 20, 2012 3:11 pm Posts: 1
|
 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 |
|
 |
PeterTheta
Joined: Tue Oct 16, 2012 4:56 am Posts: 1
|
 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 |
|
|
Who is online |
Users browsing this forum: No registered users and 4 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
|
|