CODEWITHSUNDEEP
internet-explorercssinternet-explorer-8opacitycss3pie
Gert Kommer
Gert Kommer

Reputation: 1243

IE8 linear-gradient,border-radius and opacity

I have a div which has a linear gradient, a border-radius and opacity. this is working in ie9+ ,ff, chrome etc.

but in IE8 I have a problem(using css3pie):
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#40000000", endColorstr="#40FFFFFF",GradientType=1 );
this wil get my gradient and my opacity, but ignores my border-radius: 0 0 100% 0;

when i use the pie background:
-pie-background: linear-gradient(right, #cce6f5 21%, '.$block_color.' 110%);
my linear gradient works and my border radius works, but I can't get the opacity to work. I tryed: 

opacity:0.4 // not supported in IE8
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
filter: alpha(opacity=40);

none of the above work.

how can I get all three of them to work on the same div in IE 8?

EDIT full css of the block: 

width: 204px;
height: 87px;
margin-top: 20px;

opacity: 0.4;
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40);

-o-border-bottom-right-radius: 100%; /* Opera */
-webkit-border-bottom-right-radius: 100%;
-moz-border-radius-bottomright: 100%;
border-radius:0 0 100% 0;

position:relative;
z-index:1;

background-image: linear-gradient(right, #cce6f5 21%, '.$block_color.' 110%);
background-image: -o-linear-gradient(right , #cce6f5 21%, '.$block_color.' 110%);
background-image: -moz-linear-gradient(right , #cce6f5 21%, '.$block_color.' 110%);
background-image: -webkit-linear-gradient(right , #cce6f5 21%, '.$block_color.' 110%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#40'.$ms_block_color.'",endColorstr="#40CCE6F5",GradientType=1 );
zoom:1;
background-image: -webkit-gradient(
  linear,
  right ,
  left ,
  color-stop(0.21, #cce6f5),
  color-stop(0.80, '.$block_color.')
);
behavior: url(/includes/PIE.htc);

Upvotes: 0

Views: 3794

Answers (1)

Mirko Mukaetov
Mirko Mukaetov

Reputation: 204

If u having a conflict with IE8 try this example:

.div {
background:rgb(0,0,0);
background:rgba(0,0,0,0.4);
-pie-background:rgba(0,0,0,0.4);
}

also: 1. set background with alpha channel transparancy: 1st for IE no PIE, 2nd for IE PIE, 3rd for others 2. Use behavior for IE8 3. prevent IE9 using PIE example:

:root *> .div {
  behavior: none;
}

Keep in mind that there are three declarations for the background. The first is the fallback which will show a solid background color if PIE doesn't work (i.e. Javascript is switched off). The second is the declaration for PIE which will be ignored by all browsers other than IE using PIE. The third sets the background with alpha transparency. Browsers that don't support this will ignore it and use the earlier declaration.

i hope this will help u :)

Upvotes: 2

Related Questions