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.