We are facing an issue with the code below, which creates a basic box with rounded corners and a gradient. We have applied CSSPie to achieve this effect, but we have observed that in all versions of Internet Explorer, the rounded corners do not work due to the presence of the gradient (pie doesn't function). Has anyone found a solution to this issue? We would like to transition our gradients completely from Photoshop to CSS, but this obstacle is proving to be quite frustrating!
Thank you in advance for any assistance!
.superduper {
position: relative;
width: 100px;
height: 100px;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
background: #ff0000 url("gradient-bg.png") repeat-x top;
-o-background-size: 100% 100%;
-moz-background-size: 100% 100%;
-webkit-background-size: 100% 100%;
background-size: 100% 100%;
*background: #ff0000;
background: #ff0000\0/;
filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr=#FF00ff00, endColorstr=#FFff0000);
background-image: -webkit-gradient(
linear,
left top, left bottom,
from(#00ff00),
to(#ff0000)
);
background-image: -webkit-linear-gradient(
top,
#00ff00,
#ff0000
);
background-image: -moz-linear-gradient(
top,
#00ff00,
#ff0000
);
background-image: -o-linear-gradient(
top,
#00ff00,
#ff0000
);
background-image: linear-gradient(
top,
#00ff00,
#ff0000
);
}