CSS Pie: Trouble-Shooting

02/08/2011

Rounded corners and gradients: Two monsters which used to strike insurmountable fear into web developers across the land have been slayed by CSS PIE….or so the the tale goes. CSS PIE makes some of CSS3’s most useful properties work in Internet Explorer 6, 7 and 8. No header call needed. All you have to do is pop a htc file somewhere on your server and absolute link to it from your CSS style using the behavior property. Please see below for an example:

#container {
 box-shadow:0 2px 9px #888;
-webkit-box-shadow:0 2px 9px #888;
-moz-box-shadow:0 2px 9px #888;
 behavior: url(/css3pie/PIE.htc);  

 }

The properties CSS PIE supports are: Box-shadow, Border-radius, Linear-gradient. My first time using PIE proved to be very effective with no problems. However, as I have been using CSS PIE more and more I am coming across problems. I thought it would be useful to share these problems and the solutions.

 

Problem 1 : It’s just not reading it!!! It just isn’t picking up the htc file! A quick search for CSS PIE problems on google, will see yourself being bombarded with posts asking that you have linked to the HTC file absolutely. It’s good advice but on my occasion it still wasn’t reading the file. Mark my web development colleague then suggested I change the CSS behviour property to point to CSSPIE.php. And it worked………………but not in I.E 8. This brings me to problem two.

 

Problem 2: IE 8, you used to be alright. I.E was clearly running PIE, but instead of adding the CSS, it stripped out all the styling on the DIV. It was quite distressing seeing the relatively headache free IE8 being out trumped by it’s elder IE7. To stop this, all one has to do is add the property position:relative to the element your adding PIE styling to. Like below:

#container {
 box-shadow:0 2px 9px #888;
-webkit-box-shadow:0 2px 9px #888;
-moz-box-shadow:0 2px 9px #888;
 behavior: url(/css3pie/PIE.htc);
position: relative;

 }

And that’s it, the monster has been slayed.