Working with PIE in WordPress for older IE versions

This article is a ROUGH DRAFT. The author is still working on this document, so please do not edit this without the author's permission. The content within this article may not yet be verified or valid. This information is subject to change.

Many CSS3 features do not work with earlier releases of Internet Explorer. This can cause your WordPress site to look unattractive for those that haven't or are unable to upgrade to a more current version.

There is a work around but it's ugly. Add conditional CSS to your head for any version of IE less than 9 and reference PIE.htc from CSS3 PIE.

This is easily done by adding some code to your theme's functions.php file.

Download the zip file for PIE

Create a pie directory where your theme is and extract that zip file there

In your theme directory, create a new folder called pie i.e. your-theme/pie. I like to make a separate directory to keep things organized. In 6 months I don't want to ask myself "what's that file again?"

Find the "offending" CSS

In your theme's style.css look for any references for border radius, those are the elements you'll need to apply the fix to. The one's I've looked for are these.

Add code to your functions.php file

What we want to do is add to the head a conditional so that if the Internet Explorer browser is less than version 9, add the behavior tag to those CSS elements. We could do if via editing the theme's header.php but that's an even uglier solution.

I don't have Internet Explorer 8 installed, how can I test this?

This is something to make your WordPress site look spiffy for older browsers. In IE 8 and IE 9 a problem site may render well. Even in version 7 it will look mostly okay.

IE version 6 and below need not apply.

People should be encouraged to upgrade to the latest version of their browser. Even Microsoft get's that and is trying to stomp out version 6. But this will permit some of the newer CSS functionality to work for those other users.