If you are like most web designers we share one common thing- a hatred of Internet Explorer. We can go on and on about how much we despise Internet Explorer, but soon enough we will see a change with Internet Explorer 9. With Internet Explorer 9 we have the promise of the use of CSS3. For those of you that don’t know what this means, let me just say that it is a way for you to do some cool things in CSS. The other browsers such as Firefox, Safari and Opera all support CSS3, it is only Internet Explorer that still does not support it. Now you are probably wondering, well why do this tutorial if Internet Explorer 9 is coming? As you know, most people don’t upgrade. We still have clients that use Internet Explorer 6. So even with Internet Explorer 9 available, most users will still be on Internet Explorer 7 and 8.
Recently a client wanted us to do some rounded corners and shadows for their site, so we began to discuss the issue of Internet Explorer and its limitations. Realizing that most of his visitors will probably be using Internet Explorer, we had to come up with a solution. After looking at a few different solutions and discarding them we came upon CSS3 Pie. We think that this solution is the easiest to implement, and despite a few quirks, it works well. To see shadows and rounded corners check out our portfolio page – the content box has rounded corners and the portfolio images have shadows.
Here is how to use CSS3 Pie.
1. Download the CSS3 Pie files.
2. Unzip and find the PIE.htc and PIE.PHP files.
3. Using your ftp program upload PIE.htc and PIE.php files up to your Thesis custom file.
4. Make note of the url of the PIE.php file.
5. Then go to your custom.css file and add the CSS3 code for rounding or shadow or etc… Warning. You cannot use the long format for CSS3 you must use the short format.
6. Right after the CSS3 code add the following line and the myurl.com with your site’s url.
behavior: url(http://myurl.com/wp-content/themes/thesis_18/custom/PIE.php);
7. Check it out in IE 7-8.
Please comment
{ 4 comments… read them below or add one }
Hi there
On css3pie.com they only mention uploading the htc file and pointing the behaviour url at that. I tried in Thesis and seems to work; so I’m curious to find out why you specify also loading the php file and pointing the behaviour css at that file instead?
Kind regards
Simon
Simon,
That is a great question and the reason has to do with how different servers handle the Pie.htc file. We were stumped as to why the simple Pie.htc file would not work for us. We tried it in different folders and we eventually gave up on it. Then we read on one of the forum posts that some were having better success with the Pie.php file. So we uploaded the Pie.php file and it works.
Thank you for your comment.
Site: http://bit.ly/pC3xe2
Thanks so much for this, I got it working in IE 7 but for some reason I still see Squares instead of circles in IE 8
thoughts?
Kevin W
Thanks! You’ve saved me a lot of time.