With the arrival of IE9 in March web designers have had reason to celebrate as support for CSS3 and newer web technology gets some added support in the notorious Internet Explorer browser. Some of the new features will include the popular rounded corner and box shadow effects which were not supported in IE until now. This forced us to use the sliding door technique and multiple background images to achieve the same look already rendered by many other browsers

Unfortunately, getting a user to upgrade their version of IE is a harder task than one might think. IE6 is still being used 10 years later despite it’s canny ability to cause hair loss in web professionals. Why? I imagine the reasons are still the same as discussed in the article on CSS-Tricks a few years ago:Why People Use IE6.

Enter CSS3 PIE

This is not the first .htc javascript dependent fix for IE, but it is the most reliable and well documented solution, not to mention it’s easy as PIE ( pun intended, don’t hate me ) to implement.

  1. Download the CSS3 PIE package
  2. Upload the unzipped CSS3 PIE folder to the root of your WordPress install. Important :This means you upload to the same directory as your wp-config.php file and NOT your theme root.
  3. Finally, all you have to do is add the behavior to the same selector where you are applying CSS3. For example to round the corners of your PageLines Box sets you would add this CSS. The last line in the code below is all you need to extend the affect to IE.
    .fbox {
    	-webkit-border-radius: 8px;
    	-moz-border-radius: 8px;
    	border-radius: 8px;
    	background: #DDD;
    	behavior: url(PIE-1.0beta4/PIE.htc);
    }
    

If the content where you are adding the affect disappears in IE all you have to do is add relative positioning to the selector:

.fbox {position:relative;}

Some Extra Perks

CSS3 PIE is a serious project supported and maintained by Sencha Labs, meaning that its open source development is only going to improve. It also provides custom properties for more advanced functionality, such as lazy initialization for keeping load times fast on large pages and even has a user forum.

For more information on CSS3 PIE and a comparison of other CSS3 products, check them out at : CSS3 PIE for Internet Explorer

2 Responses to IE 6+ Rounded Corners for WordPress using CSS3 PIE

  1. Wow, that’s great. First time I’ve heard of it. Really quick and easy to setup, it’s basically just uploading the folder to the root and adding “behavior: url(PIE-1.0beta4/PIE.htc);” to my existing CSS selector that had the rounded border code in it.

    Thanks!

    • cmunns says:

      I’m glad it was as easy for you as I described. I really have to tip my hat off to the team at CSS3 PIE

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>

Looking for something?

Use the form below to search the site:


Still not finding what you're looking for? Drop us a note so we can take care of it!

Archives

All entries, chronologically...