Hi,
Not sure if this script is still actively supported/monitored, but figured I'd give it a shot. I'm trying to get CSS3 PIE v.2.0 working on a WordPress site, but am stuck. I am able to get v.1.0 working fine in a subdirectory of my theme folder (e.g., /current-theme/library/pie/). I use site root relative paths in my CSS to the PIE.htc file (e.g., /wp-content/themes/current-theme/library/pie/PIE.htc). Then I just have a simple test setup in my style sheet based on the example on the home page here, testing for radius, box-shadow & gradient on an empty DIV. Again, appears to work OK with v.1.0, but would like some of the additional features of v.2.0.

In IE8, I get the following error:
- Access Denied; PIE.htc, line 14, character 490;
That seems to be the following code:


- I also tried using 'PIE_uncompressed.htc', and got the same error on line 59, character 21.
That seems to be this code:


And NONE of the PIE generated styles on my test are reflected in my test (e.g., no radius, box-shadows, or gradient). So it's like the script is not running at all.

Here's what I've tried:
- I delete the v.1.0 files from my '/pie' directory and replace them with the v.2.0 files (7 total). So the directory is the same.
- Added the 'AddType text/x-component .htc' line to my .htaccess file. Tried at the top & bottom.
- Changed permissions on the files. Even briefly tried 777.
- Tried placing the files in a directory on the root (e.g. '/pie/).
- Tried placing the files in the root of my theme where the 1 main style sheet is (styles.css).
- Tried making all behavior links absolute (e.g., http://www.domain.com/wp-content/... etc.).
- The site is under development and currently the root is password protected. Tried removing that briefly.
- Tried adding a script someone recommended to get my Typekit fonts loading later (<script type="text/javascript">{ $(window).load(function() { try{Typekit.load();}catch(e){}}); } else { try{Typekit.load();}catch(e){} }</script>)

- Any ideas???
Seems to be pointing to access being denied for the style sheet, but I don't really know JS to be able to tell for sure.

Thanks!

Hmm, sounds like it could be a bug in the 2.0 loader code. This part of the code is looking through the document's stylesheets until it finds one whose CSS content contains the behavior:url() rule, and uses the path in that url() to know where to load the rest of the files from.

My guess would be that while it's looking into the stylesheets, it's coming across one that it isn't allowed to read from. Is there maybe a stylesheet in your doc that is from a different domain? Is there any other special aspect to one of your stylesheets? It loops through the stylesheets backward from last to first, if that helps.

(BTW, active development of PIE has pretty much halted, but I'd be happy to push a patch for this if we can identify a fix.)

Hi Jason,
Thank you so much for responding. I really appreciate it.

I didn't realize it was searching through all linked style sheets (guess I assumed it just worked on the style sheet that had the 'behavior' links). This helped me figure out what I assume the problem is.

I have one externally linked style sheet. It's the TypeKit loaded styles for the web fonts we're using on the site. I tried disabling TypeKit altogether, and stopped getting the errors (and started seeing some of the CSS3 styles working).

So I found the following 2 threads from a few years ago that reference getting TypeKit to work with CSS3 PIE. They don't necessarily describe the same issue I'm having (errors and not working at all), but may be finding the same things.
- http://css3pie.com/forum/viewtopic.php?f=3&t=1410&p=4845&hilit=typekit#p4845
- http://css3pie.com/forum/viewtopic.php?f=6&t=2062&p=6918&hilit=typekit#p6918

Both of those threads reference a similar fix, which I believe attempts to load the TypeKit stuff after CSS3 PIE is done, but ONLY in IE 8. Wondering if this would help in my case?!?

I tried adding the scripts that were listed on those threads, but alas I am not fluent enough in PHP or JS to be able to finesse or fix the code to work properly in my situation. When I add the code 'as-is', it seems to just print the second script as written instead of running the function that would detect the browser & load the TypeKit styles properly.

So when I examine the source code, in the Head I actually see:


I'm assuming the code should run and depending upon browser, load the resulting TypeKit styles either right away or after everything else. But no styles load and the type does not display.

Here's how I currently load the TypeKit code in my WordPress functions.php file:


The site also loads jQuery v.1.11.1 and jQuery Migrate 1.2.1 if that helps.

- Am I close to the solution, and any help finessing the old code listed in those threads to work better in modern WordPress environment??
- Or, is there any way to force CSS3 PIE to just use the one main site style sheet were all calls are made?

Thanks again for any help!! We wish to be able to use CSS3 PIE in future projects as well, which will all be based on the framework we're using on this site. So whatever we learn will be very useful for the future (and hopefully for other users).

- Kenny

Can you please try using this build:

I've added a try/catch around that part of the code, which should keep it from failing on external stylesheets and just move on to the next one. Let me know if it works and allows you to keep using your TypeKit stylesheet.

Thanks for your help in narrowing this down!

Thank you! Thank you! That seemed to have done the trick. After playing around with this for many weeks, it's SO nice to finally see it working as it's 'supposed' to (now just have to determine to what degree that is).

I hope this can help anyone else who has external style sheets loading (e.g., Typekit or other web fonts, etc.). Much better than trying to wrangle the Typekit code unnecessarily.

-------

Now that I see it working, though, I see some things that I'll probably have to let go of. But wonder if you could just confirm a couple things:

A) Styles used on pseudo elements (:before, :after) won't display? We have a lot of shadows that can only be positioned properly with this.

B) Box-shadows with 'inset' won't display, and probably not in future? We also use this a lot.

C) I'm trying to get a gradient underline for headings without using a background-image on an :after pseudo element. But when I set the background-size in the -pie-background shorthand to only 2px tall, it still expands to fill the whole block background in IE8. Any ideas?
Here's the style I'm using for that:


Thanks again for the support even though the script isn't actively updated. We'll now be able to use it on future projects.

- Kenny

Great! Glad to know that worked. I'll try to put out a maintenance release with that fix soon.

As to your questions:

A) Correct, it won't work on pseudo elements. That's because IE itself doesn't support behavior:url() on pseudos, and also because pseudos have no DOM to access via JavaScript.

B) I've spent countless hours trying to get inset shadows to work. I've never gotten any further than very simplistic shadows with no offset. VML just isn't expressive enough to render what we would need. So no, unfortunately, I don't expect this will ever work.

C) This is also a limitation of VML. The docs do mention it in the gradients section -- "The background-size/origin/repeat/position parameters are not supported for gradients in IE 6-8" but they could definitely be clearer about that when discussing background-size in the -pie-background section. It should work in IE9 though.