CSS3 PIE.htc Not Working

Question

I can't seem to get PIE.htc working on this site.

Here's my CSS:

section#feature {
    -webkit-border-top-left-radius: 4px;
    -webkit-border-top-right-radius: 4px;
    -moz-border-radius-topleft: 4px;
    -moz-border-radius-topright: 4px;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    behavior: url(http://sykeshr.co.uk/temp/PIE.htc);
}

Any ideas what I'm doing wrong?

You can view the site here: http://www.sykeshr.co.uk/temp/

Answer 1

Problem 1:

You provided a link to your site that included the 'www', so in your code you would need to call with the 'www':

behavior: url(http://www.sykeshr.co.uk/temp/PIE.htc)

However, this is discouraged because if a user access your site without the 'www', then CSS3 pie will again, not work.

You should use a relative url instead (it will be relative to the html file that is calling your css file):

behavior: url(../temp/PIE.htc)

Or:

behavior: url(PIE.htc)

Problem 2:

Only the shorthand version of border-radius is supported by CSS3 Pie (no border-top-left-radius, no prefixed border-radius styles, etc): CSS3 Pie Supported Features

Answer 2

I have found the solution for my problem of PIE.htc not working.

1. Get the PIE.htc from their website
2. put the file directly under /webapp folder which is your root folder.
3. call it like behavior: url(PIE.htc)

I have spent 2 weeks getting this to work for IE8 for my css3 box to have rounded corners. the css3pie.com does not tell you where exactly to put the file.

For me putting the file under the css folder does not work.

***If it helps I am using GWT to develop my application.

Answer 3

I found that it only worked on my server if

1. I call Pie as behavior: url(PIE.htc);
2. if PIE.htc is in the same directory as my css file.

Hope this helps.

Answer 4

Try to use following path

behavior: url(//yoursite.com/path/to/PIE.htc);