Saturday, September 3, 2011

Magento: Use PIE for IE6-8 CSS3 Decoration Features

Version: Magento 1.x
Problem:
Make IE6-8 recognize useful CSS3 decoration features. e.g. rounded corners.
Solution:
Install third party solution PIE as follows:
  1. Download latest PIE version: http://css3pie.com
  2. Copy PIE.htc to /skin/frontend/yourdesignpackage/yourtheme/css/ (in fact your can copy it to any location you like).
When specifying CSS3 styles in your stylesheet – include the behavior property with the full url to the .htc file.  For example:
.rounded-corner {
    border: 5px solid #d8d7cd;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    behavior: url(/skin/frontend/yourdesignpackage/yourtheme/css/PIE.htc);
}

No comments:

Post a Comment