Monthly Archives: March 2011

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.

CSS3 Vendor Prefixes

-moz-     /* Firefox and other browsers using Mozilla's browser engine */
-webkit-  /* Safari, Chrome and browsers using the Webkit engine */
-o-       /* Opera */
-ms-      /* Internet Explorer (but not always) */ 

Explanation

These browser prefixes are needed as the browsers experiment and test out their implementations of the newer CSS3 properties. Sometimes all the prefixes are not always needed, but it usually does not hurt to include them, as long as you make sure to put the non-prefixed version last.

-moz-border-radius: 10px; 
-webkit-border-radius: 10px; 
-o-border-radius: 10px; 
border-radius: 10px; 

There are several reasons why this is important, but I’m not going to get into that here. Just make it a rule to always include the non-prefixed version and put it at the end.

Some properties are so far along in development, that some browsers are dropping the prefix. Border-radius is one property that is pretty well developed at this point. The latest versions of major browsers all seem to support it without the vendor-prefixes. Keeping them in the code, however, allows you to make sure users who don’t update their browsers, will still be served.

Internet Explorer

Internet Explorer 9 supports many (but not all) of the favorite CSS3 properties. You can use border-radius without any vendor-prefix, for example.

For IE versions 6-8 (which includes almost half of all users browsing the web, unfortunately) you need to to make sure your design works OK without the CSS3. For three properties: border-radius, linear-gradient, and box-shadow, you can use CSS3Pie, which I will be discussing in my next post. It is a great little file you can add to your home directory (based on javascript) which makes these properties work in Internet Explorer versions 6-8.

If you install it in your site, you can add this code after your other defintions:
behavior: url(/PIE.htc);