6

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

eric.itzhak
  • 15,752
  • 26
  • 89
  • 142
  • Did you ever find a solution to this? I'm having the same problem and nothing suggested here has fixed what's going on. – Zach Wolf Jan 18 '13 at 22:26
  • I know this is late. Had same issue but with rounded corner...couldn't get it to work. Found out it's because I was using the 2.0 beta version. Gotta stick with rock solid 1.0 i guess. – sqram Feb 13 '13 at 20:49

8 Answers8

9

Use your website link. Eg:

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

It will work fine.

Perception
  • 79,279
  • 19
  • 185
  • 195
Tanveer
  • 91
  • 1
  • 1
6

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;.

logan
  • 3,416
  • 1
  • 33
  • 45
  • So, you're not getting any `` elements? Is it the `box-shadow` in particular that's broken, or have you tried on other elements? – logan Jan 28 '12 at 09:50
  • It's got to be something to do with the path. Can you check if you are getting any errors? Can you share a public link for the website? – logan May 01 '12 at 01:14
  • I played around with (not sure what i did) and i do see but still dosen't work. – eric.itzhak May 23 '12 at 17:47
  • Sorry, without some more code, it is hard for me to tell what is wrong. See if you can create a minimal test case using http://jsfiddle.net/ – logan May 29 '12 at 00:26
3

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!

Armel Larcier
  • 15,747
  • 7
  • 68
  • 89
  • Like this person says, try giving the element position:relative and perhaps also a z-index. This has solved my problems a couple of times. – PaulSkinner Mar 12 '13 at 09:41
2

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+);
Elroy
  • 1,530
  • 2
  • 15
  • 16
1

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.

Layke
  • 51,422
  • 11
  • 85
  • 111
  • Good information thank you. but i changed it and still no results as if it dosen't work AT all. i'm currently trying with absolute path http and with the PIE.php and same results – eric.itzhak May 23 '12 at 17:36
0

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. :)

Mark Watkins
  • 1
0

do not use this with css3pie:

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

my problem solved

arman
  • 31
  • 4
0

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);
Rikard Uppström
  • 1,413
  • 9
  • 16