How to enable CSS3 styles to apply on old IE browsers (IE6-IE8)

CSS Level 3 brings with it some incredibly powerful styling features. Rounded corners, soft drop shadows, gradient fills, and so on. Without these features, styling these elements are difficult, time consuming and involves complex sprite images. But the irony for old browsers (IE6-IE8), which are still used in most of the companies, is that they are refrained from these new features. But by using PIE, old browsers can recognize number of CSS3 properties.

PIE (Progressive Internet Explorer) is an IE attached behaviour which when applied to an element, allows old browsers to recognize number of CSS 3 properties.

PIE currently adds full or partial support to IE 6 through 8 for the following CSS3 features:

  • border-radius
  • box-shadow
  • border-image
  • multiple background images
  • linear-gradient as background image

 How to setup and apply PIE to css file
Step 1 – Download PIE from here.
Step 2 – Upload PIE.htc, Pie.js and Pie.php to the same location where your css file is stored.
Step 3 – In your css file, add the css class (shown below) which transform ‘DIV’ element to round edged button with shadow effect.
#somediv{
margin-bottom:5px;
behavior: url(‘PIE.htc’);
border: 1px solid #999;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;
position:relative;
padding-top:5px;
padding-left:15px;
padding-right:15px;
padding-bottom:5px;
background-color:#A63331;
color:white;
-webkit-box-shadow: 0px 0px 5px rgba(166, 51, 49, 0.5);
-moz-box-shadow: 0px 0px 5px rgba(166, 51, 49, 0.5);
box-shadow: 0px 0px 5px rgba(166, 51, 49, 0.5);
}

Trackbacks

Leave a Comment

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