Applying RGBA Background and Box-Shadow??
Hi there
Maybe this has asked before, but all answers I read I couldn't find the solution.
Problem: I am trying to use box-shadow and rgba with a transparency on a div container.
Code:
#textbox {
position:absolute;
width:300px;
height:200px;
font-family:verdana, Arial, Sans-Serif;
z-index:100;
/* Fallback for web browsers that doesn't support RGBa */
background:rgb(255, 255, 255) transparent;
/* RGBa with 0.85 opacity */
background:rgba(255, 255, 255, 0.85);
-pie-background:rgba(255, 255, 255, 0.85); /* For IE*/
-o-box-shadow: 2px 2px 3px #c1c1c1;
-moz-box-shadow: 2px 2px 3px #c1c1c1;
-webkit-box-shadow: 2px 2px 3px #c1c1c1;
box-shadow: 2px 2px 3px #c1c1c1; /*CSS3 Standard*/
behavior:url(.../PIE.htc);
}
Problem is: Everything runs fine in Firefox, Opera, IE9, Safari. However in IE7 and IE8 I get either the rgba transparency to work or the box shadow. Both is not possible.
It seems like box-shadow is putting another filter on the box, and ruins the rgba values.
I read that rgba is not fully supported with PIE, especially if you use box-shadow.
Has anybody ideas or experiences or that?
THANKS
flymke
Forums
