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

I used the PIE.htc file for border-radius to apply it on img element on *.aspx page in SharePoint 2010 environment. Any of the url combinations both relative and absolute did not work for me. For example none of the following worked:

bahavior: url(http://[root]/[path]/PIE.htc); 
behavior: url(/[path]/PIE.htc);
behavior: url(../[path]/PIE.htc);  
behavior: url([path]/PIE.htc); 

The PIE.htc file worked only when it was placed in the same folder as the *.aspx file. i.e bahavior: url(PIE.htc). After trying different url combinations with single quote and double quotes (both relative and absolute paths), I was finally able to get it work by using the uncompressed version of the file "PIE_uncompressed.htc". No matter there is single quote, double quote or no quote, it worked for me for both absolute and relative paths when I used the uncompressed file. Therefore, any relative or absolute path worked fine with the uncompressed file. I also have to add position:relative in the CSS as shown below:

img.homePageButton
{
 position:relative;
 border-radius: 25px;
 behavior: url(/[path]/PIE_uncompressed.htc);
}

The above CSS worked fine and the image was properly styled with border-radius in IE8.
Note: Relative paths should be relative to the *.aspx file not the CSS file. You can also use a url path relative to the root site.

Answer 2

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 3

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.

Answer 4

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 5

Using an absolute path seems to work fine in most cases with SP2010. We reference it in our SharePoint solutions like so, without any problems:

.yourPIEEnhancedClass {
    behavior: url('/_layouts/ProjectName/Styles/PIE.htc');
}

If you're pointing at the Style Library for whatever reason, the space in the string will probably force you to have to use a quoted string for the behaviour URL... same goes for most things in CSS (e.g. font names with spaces).

The only other thing I can think of is to make sure that IIS is serving up the correct mime-type (text/x-component) for the .HTC. You may have to add it in there manually as per the known issues documentation.

Answer 6

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 7

See if the information on this question is helpful:

CSS3 PIE - Giving IE border-radius support not working?

I think this answer may be useful, but you may find good info in other answers as well.

CSS3 PIE - Giving IE border-radius support not working?