CSS3 Pie not working at All, tried everything

Question

I'm trying to apply css3pie

to my website, and it dosen't seem to be applied at all. I have tried anything i could find:

• Checked the path to PIE.htc, put it in main folder and used url(/PIE.htc), even tried full URL, nothing worked.
• Tried using PIE.php, that didn't work either.
• Tried adding "AddType text/x-component .htc" to the .htaccess file, no good
• Tried adding position:relative; z-index: 0;, No good.

The code i'm trying to apply is :

   -webkit-box-shadow: 0px 0px 13px rgba(0,0,0,.9);
 -moz-box-shadow: 0px 0px 13px rgba(0,0,0,.9);
 box-shadow: 0px 0px 13px rgba(0,0,0,.9);

What am i missing?

EDIT: if this matters, when i view the loaded css in IE, i see the behavior command is in same line like the next one, though syntax is correct

Answer 1

Use the Web Developer tools (F12) to see if there are any <css3-container> elements being created. If there aren't then there is a problem with your behaviour css declaration. If those elements exist, then don't change anything with your PIE.htc -- its a styling issue and you can mess around with things like position:relative; z-index: 0;.

Answer 2

Try using the hex-value notation for the color instead. In the documentation it says there are limitations to using rgba notation:

box-shadow: 0px 0px 13px #000;
filter: Alpha(Opacity=90);
opacity: 0.9;
behavior: url(/Pie.htc);

Answer 3

CSSPie3 does not support box-shadow when you are trying to use a blur. It's just not possible.

Instead, remove the blur, and your box-shadow shim will work.

See here for sources:

http://css3pie.com/forum/viewtopic.php?f=3&t=991

http://css3pie.com/documentation/supported-css3-features/

Unfortunately PIE only supports rgba opacity in box-shadow if it has no blur.

http://css3pie.com/documentation/suppor ... ures/#rgba

It's often possible to work around this by simply using a lighter shade of your opaque color. If you want to let other browsers use the rgba, you can use -pie-box-shadow to override it only for PIE.

Answer 4

Use your website link. Eg:

behavior: url('http://www.yoursite.com/css/PIE.php')

It will work fine.

Answer 5

CSS3PIE places its generated elements as a sibling of the element you are styling, with a z-index value of -1. You may not see the result because it's behind some other element in the document. Try wrapping the elements you are styling inside a positionned container with an independent z-index. Hope this helps!

Answer 6

I had the same problem. PIE didn't work at all, whether htc, js or php. The problem was with the Mac Server access permission on the PIE folder that I downloaded and unzipped. It was set to no access for user everyone. Changed access to readonly and now it works! Rookie mistake. :)

Answer 7

It all depends on your Server settings:

Assuming DIR "pie" is relative to your "root" DIR, try one of the following:

    behavior: url(/pie/PIE.php);
    behavior: url(pie/PIE.php);

Also try:

    position:relative; 
    z-index: 0;

Don't use IE filter hacks with PIE, example:

    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0074a8',endColorstr='#006496',GradientType=0);
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJod…EiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);

Answer 8

do not use this with css3pie:

 filter: "progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#', endColorstr='#')";

my problem solved