Sharepoint 2010 + CSS3Pie isn't working because off behavior and specified url

Question

I'm branding a new Sharepoint 2010 public facing website. In this website I want to use shadows and rounded corners around several containers. I first tried to do it myself, but a colleague of mine told me about CSS3Pie (http://css3pie.com), which works really nice.

The problem I'm experiencing is specifying the path of the HTC-file. At the moment I've got this:

#left_content_small
{
    width: 610px;
    padding: 20px;
    border: 1px solid #999;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    -moz-box-shadow: 10px 10px 5px #888;
    -webkit-box-shadow: 10px 10px 5px #888;
    box-shadow: 10px 10px 5px #888;
    behavior: url(/PIE.htc);
}

This isn't working properly in IE. Also, using

    behavior: url(Style Library/StyleSheets/PIE.htc);

isn't working either. Also, placing " or ' around the string doesn't work. However, specifying the behavior URL like this:

behavior: url(_layouts/PIE.htc);

does work. All containers are now rendered correctly.

I could place the htc-file in the layouts folder, but I prefer not to as it kind of corrupts the default Sharepoint folders with custom files.

I've checked the page loading with Fiddler and I see the PIE.htc file returning a 200-code (which is good) in all cases. It doesn't matter if I place it in the layouts, style library or root of the site, every time it's returning a 200.

There are some known issues with CSS3Pie: http://css3pie.com/documentation/known-issues/ which state something about relative url's and such. I thought I've nailed it by placing a /-character in front of the url. Also tried the full domain url (http://testsite.local/PIE.htc), but that isn't working properly either.

Any ideas of how to place the htc file somewhere in the Sharepoint 2010 site and not in the layouts folder?

Answer 1

When working with .htc files and SharePoint 2010 (and any version of IE after IE7), you must either be in Permissive File mode or add the "text/x-component" MIME type to the AllowedInlineDownloadedMimeTypes list for each web application using PIE.

Permissive mode is the easiest to set on a web app but also opens you up to potential exploits if you allow users to upload content. (This is the same reason why PDFs do not open inside your browser by default in SharePoint 2010)

If this MIME type is not allowed, then IE will download the .htc but it will refuse to execute any behaviors contained in the file (the file is sent with the "X-Download-Options:noopen" header).

Adding the mime type to the webapp is relatively simple via PowerShell.

$webapp = Get-SPWebApplication <name or URL of web app>
$webapp.AllowedInlineDownloadedMimeTypes.Add("text/x-component")
$webapp.Update()

This is a per-webapp setting, so you will need to make the change to each webapp that will use PIE.

Making this change will also let you store the PIE.htc inside a document library.

-Robert

Answer 2

I had the same issue and fixed it with the pie.js file:

$(document).ready(function (event) {
    var webparts = $('.s4-wpTopTable, .ms-WPSelected');
        $.each(webparts, function(index,webpart)
        {
            $(webpart).wrap("<div class=\"webpart rounded\" />");
        });

    Modernizr.load({
        test: Modernizr.borderradius,
        nope: '/siteassets/js/pie.js',
        complete: borderradiusComplete
    });
});


function borderradiusComplete()
{
    if (window.PIE && !Modernizr.borderradius) {
        $('.rounded, .bottomrounded').each(function() {
            PIE.attach(this);
        });
    }
}

and then in my css:

.borderradius .webpart.rounded
{ 
border-radius:5px 5px 5px 5px;
-khtml-border-radius:5px 5px 5px 5px;
-webkit-border-radius:5px 5px 5px 5px;
-moz-border-radius:5px 5px 5px 5px
}
.no-borderradius .webpart.rounded
{
position:relative;
border-radius:10px 10px 10px 10px;
}

hope anyone benefits from this. if your box dissappears when you go into edit mode, you need to work with position:relative as described in the earlier above. this works on Sharepoint 2010 and Office365 Sharepoint Online

Answer 3

i had the same problem with a sharepoint 2010 branding and i fix with the css3pie js version.

1 you need to add the jquery path on your master page. < script type="text/javascript" src="/Scripts/jquery-1.6.2.min.js" > < /script >

2 add pie.js script on your master page < script type="text/javascript" src="/Scripts/PIE.js" >< / script >

3 you need to create a jsfunction to attach the pie. on your master page < script type="text/javascript" > $(function() { if (window.PIE) { // the name of your element has the class="rounded" $('.rounded').each(function() { PIE.attach(this); }); } });

4 Save and Publish your master page and Scripts

Answer 4

It seems that the PIE.htc file will only be recognized and rendered from a virtual directory like _layouts. I tried every variation from a non virtual directory.