CSS3Pie + Orchard 1.6

Topics: Customizing Orchard
Mar 22, 2013 at 12:04 PM
I was wondering if anybody has managed to successfully integrate CSS3Pie into their website for IE6,7,8 and 9 support?

I've tried placing the .htc file into the following with no results:
  • Root (./ of website folder)
  • Theme (Themes/ThemeName/{Content, Style, Script and root of this theme})
I've had partial joy when placing it within the themes folder (e.g. can navigate to the file in the address bar)but I don't know how to correctly reference/use it within the CMS.

It would be fantastic if i could get this to work as it would allow my jQuery UI theme to work in older IE browsers.

Note: IIS is configured to serve .htc files.
Mar 27, 2013 at 11:04 PM
If I understand correctly, you are able to access the .htc file via the browser, but you don't know how to reference it within the CMS, meaning that you don't know how to include the .htc file from within your theme?

If so, this is what you could try:
  1. Add the .htc file to the Scripts folder of your theme.
  2. In Layout..cshtml, invoke: @{ Script.Include("your-component.htc"); }
Apr 2, 2013 at 1:36 PM
I've just set that up and it pulls up an error within the developer console of IE:
"SCRIPT1002: Syntax error"
"PIE.htc, line 2 character 1"
Line which has error??:"<PUBLIC:COMPONENT lightWeight="true">"

Looks like it doesn't know what to do with it.
Apr 3, 2013 at 8:17 AM
Edited Apr 3, 2013 at 2:23 PM
Got it to work,

For anybody else who tries to do this, do the following:
  • Create a PIE folder within the scripts folder of your theme and place the .htc file within that.
  • Go to your .css file and add the following to any classes/id's which contain css3 elements e.g. border-radius:
    - position: relative;
    - z-index: 1;
    - behavior: url(http://{Domain Name}/Themes/{Theme Name}/Scripts/PIE/PIE.htc)
    
As mentioned by sfmskywalker, this was the location i was wanting the file in. But in order to correctly reference it, you need to call it local to the page that is being viewed and NOT the css file.

The css attributes of position/z-index are a fix for a few quirks within IE, other than that it seems to work pretty well doing rounded borders in IE7+. Just got to alter the jQuery UI css library to work with it now.