Boy, was this a huge pain to figure out. I’m hoping I can save others some teeth-grinding here.

CSS3 PIE is a wonderful addon that makes IE 6-8 render many of the most-used CSS3 features, including:

  • rounded corners
  • box shadows
  • text shadows
  • linear gradients
  • border images
  • multiple background images

It is super-easy to use on an HTML/CSS site, you simply add the PIE.htc file to your site and call the behavior like this in CSS:

And if you can, add this to .htaccess (if you can’t do this for some reason, you can use PIE.php instead of PIE.htc in the CSS file):

Works like a charm.

But if you’re using WordPress…

We have a different story entirely. I was unable to get PIE working after several attempts, moving the PIE file, trying PIE.htc vs PIE.php, etc. What I’ll show you are the final edits that got it working for me. Note: I’m using a child theme of Theme Hybrid.

1) This is in my functions.php file:

So you see you’ll add all the CSS elements that need PIE treatment in IE, then the behavior line with a call to the PIE.htc file (I found that I had to use an absolute link, relative did not work for me on this WordPress site).

2) I added the AddType statement for .htc in my .htaccess file; if for some reason I hadn’t been able to do that, I’d call PIE.php instead.

3) I removed the filters in every CSS element I included in functions.php (I was using a gradient filter for the buttons, and that hides the PIE results).

4) All the CSS elements involved were given position: relative.

Getting PIE to work in WordPress is tricky. There are some posts on the PIE forums that helped, but the part about the filter eluded me and that was the final issue to solve. There are other suggestions there that are reported to work in WordPress, but they didn’t for me, maybe due to something about Theme Hybrid – I don’t know. I did have another Theme Hybrid user confirm that what I showed above worked for him, too.

Let me know if this helps you!

« »