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