CSS3 Pie (Make CSS3 work in IE)

No matter how irritating it is to have to worry about making your designs work in Internet Explorer, if you want to be a decent web designer, you need to account for IE. Over half of web users still use some version of it, and unless you know the web audience targeted won’t be using IE, you should try to make sure your website looks at least nice and acceptable in IE. It does not need to look exactly the same, however.

A great little plug-in to bridge the IE gap and bring a few of the important CSS3 properties to that browser is called CSS3 Pie. It makes the following properties work in IE browsers:

  • border-radius
  • gradient (linear only)
  • box-shadow
  • multiple background images

CSS3 Pie is a simple download with one file that you add to the home directory of your website. It can actually be added in a subdirectory, but if you don’t put it in your home directory, the url in the snippet will need to be changed.

Once you have added this file to the root directory, all you need to do to make the CSS work is the following snippet of code after your other CSS3 code:
behavior: url(PIE.htc);
position: relative; /* This fixes a z-index problem, but may not be necessary */

The path of your url may need to be different. It is important that the path is correct relative to your HTML pages, and not your CSS page. I have had a little bit of trouble getting CSS3PIE to work correctly for all the sup pages when using Word Press. Putting PIE in root directory and using a path of (/PIE.htc) is working best for me with WordPress.

Explanation

CSS3 Pie is an easy to use utility, but you may have issues getting it to work. My experience has been good as long as I use relative positioning.

Sometimes if you don’t add the line making the selector have relative positioning, the objects you are applying the CSS3 property will disappear. There may be times when using relative positioning won’t work for you. If that is the case, please read the troubleshooting page for more explanation on common issues with CSS3Pie.

Always test your work on an Internet Explorer browser, versions 6, 7 or 8, to make sure that things are working the way you want.

CSS3Pie does not work with IE9, but those CSS3 properties already work in IE9.

Be sure to check out the Known Issues page, if you are having any trouble. There is also a User Forum for additional help. Overall, the entire web-site is full of great info and help, so make sure to explore if you want to learn more.

2 thoughts on “CSS3 Pie (Make CSS3 work in IE)

  1. Thanks so much for this! I literally spent about 3 hours tearing me hair out wondering why the hell it would not work and all I had to do was add “position: relative” ha!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>