Geek Answers Handbook

Sharepoint 2010 + CSS3Pie not working due to behavior and URL specified

I am announcing the new Sharepoint 2010 website. On this website I want to use shadows and rounded corners around several containers. At first I tried to do it myself, but my colleague told me about CSS3Pie ( http://css3pie.com ), which works very well.

The problem I encountered indicates the path to the HTC file. At the moment I have 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);
}

In IE, this does not work. Also using

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

doesn't work either. Also, placing a "or" around a line does not work. However, specifying the behavior URL as follows:

behavior: url(_layouts/PIE.htc);

really works. All containers are now displayed correctly.

htc , , Sharepoint .

Fiddler, , PIE.htc 200- ( ) . , , , , 200.

CSS3Pie: http://css3pie.com/documentation/known-issues/, URL- .. , , /-character . URL (http://testsite.local/PIE.htc), .

, htc - Sharepoint 2010, ?

+5
6

.htc SharePoint 2010 ( IE IE7) , MIME "text/x-component" AllowedInlineDownloadedMimeTypes - PIE.

-, , . ( , PDF SharePoint 2010)

MIME , IE .htc, - , ( "X-Download-Options: noopen" ).

mime webapp PowerShell.

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

per-webapp, webapp, PIE.

PIE.htc .

-

+7

​​ pie.js:

$(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);
        });
    }
}

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;
}

, - . , , : , . Sharepoint 2010 Office365 Sharepoint Online

+3

sharepoint 2010, css3pie js.

1 jquery . < script type = "text/javascript" src= "/Scripts/jquery-1.6.2.min.js" > </script>

2 pie.js script < script type = "text/javascript" src= "/Scripts/PIE.js" > </script>

3 jsfunction .   < script type = "text/javascript" > $(function() { if (window.PIE) { // the name of your element has the class="rounded" $('.rounded').each(function() { PIE.attach(this); }); } });

4

+1

, PIE.htc , _layouts. .

+1

, -, SP2010. SharePoint , - :

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

If you point to a style library for any reason, the space in the line is likely to force you to use the quote line for the behavior URL ... the same goes for most things in CSS (e.g. font names with spaces).

The only thing I can think of is to make sure that IIS is serving the correct MIME type ( text / x-component ) for .HTC. You may need to add it there manually according to information about known issues .

0
source

More articles:


All Articles