Progressive Internet Explorer -PIE

Greatest thing since sliced…..PIE!

Want to take advantage of some of the newer CSS3 modules, say…. rounded corners? I have been tinkering with some of the new CSS3 modules myself, an @media query here, an @fontface there, but the reality is… most of our customers don’t have the latest and greatest browsers installed or even the latest computers for that matter. As a wise webdeveloper once said; “One can’t just forget about cross-browser compatability issues, he/she still needs to accomodate some of those users.”

Why can’t we use some of the great features of CSS3 now? Its a well-known fact that IE doesn’t support most of the modules available for CSS3 and the specification itself isn’t even complete yet. At the cost of hours of tedious images creations, and at the expense of non-semantic markup.

The page I’m working on uses CSS3 rounded corners (border radius), not a huge advancement but a nice addition none the less. Mozilla and Chrome have their very own special calling cards for using rounded corners on divs (any box really).

-moz-border-radius: 15px; /*Mozilla*/
border-radious: 15px; /*Chrome/Safari*/

When you view a page with these styles applied using Microsoft’s Internet Explorer the corners will appear square. There are a few other ways to get around this using javascript, but I will discuss a neat little fix dubbed, PIE. PIE – Progressive Internet Explorer adds support of the border-radius module (among others) to IE 6-8, IE 9 supports border-radius natively.

1. Download and install the PIE.htc file at css3pie and upload it to the server that your hosts your page. You can put it anywhere you like, I chose to put my copy into a folder called “pie”.

2. Here is my css for this page:

#wrapper {
width: 90%;
margin: 0 auto;
-moz-border-radius: 15px;
border-radius: 15px;
behavior: url('/apps/pie/PIE.htc');
}

…add this bit of css to the divs you want to have rounded corners.

behavior: url('path/to/PIE.htc');

Seriously?! Yes, this is it. PIE.htc takes care of the rest and the results are great. My simple rounded wrapper div looks great in IE 7. Take that Microsoft! They cant seem to add support for newer technologies to their browser so software gurus continue to make great workarounds. Thank you so much!

(IE7)
Before..
IE square

(IE 7)
After…
IE

view the full documentation and download the fix here css3pie.

PIE supports a list of different CSS3 modules for IE 6-8 view the list and read the documentation for more information.

border-radius
box-shadow
border-image
gradients