real estate blog lab

There’s a project out there called PIE. It is in beta. I tested version 1 yesterday. Version 2 is out today. I’ll take it for a spin soon.  I have no idea what version will be up by the time you read this post.  But I do know they post the latest at the top and date the files, nice.

It took me a couple of hours to figure out all the pieces. There were bits of information spread all over the place. Too many assumptions that we would all just “know” certain things.

I’ve removed the assumptions and will show you exactly how to get CSS3 functionality pushed to IE browsers from your blog. Making it “pretty” for IE is now possible.

(When I wrote yesterday’s post CSS3 Is Here Now I hadn’t found this yet)

CSS3 PIE

The first thing you want to do is download the files you will need.  PIE for IE

You will find three files inside the zip file.

PIE.htc
PIE.php
PIE_uncompressed.htc

PIE.htc is probably the only one you will need.  But if after doing all the instructions here it still doesn’t show up change the behavior line to PIE.php

Upload these three files to your current theme directory.  Ex.  If you are using TwentyTen, upload them to wp-content/themes/twentyten/

Second, Where you have added the CSS3 styles you will need to add:

behavior: url(/wp-content/themes/yourthemedirectory/PIE.htc);
Followed by the CSS3 style WITHOUT THE -moz- in front of it.
Using yesterdays example that will look like this:

#calloutbox {
behavior: url(/wp-content/themes/yourthemedirectory/PIE.htc);
border-radius:10px 10px 10px 10px;
box-shadow:3px 3px 7px #333333;
-moz-border-radius:10px 10px 10px 10px;
-moz-box-shadow:3px 3px 7px #333333;
}

Do this where ever you have inserted CSS3 styles in your style.css file.

Final note. Don’t forget to put the leading “/” before the wp-content/ etc. If you do the styles will show up on the home page only. This was part of the digging out all the details.

Now you can have the same rounded corners and drop shadows in IE.

Not all CSS3 commands are supported with PIE (yet) but the basic ones you want to dress up your site are supported and easy to implement.

Now you can have your CSS3 styles in IE too.