where do I put the PIE.htc file (for making IE work with CSS3) when I'm using cakephp

Question

I'm trying to use PIE.htc, which is a script which hopefully will allow me to use CSS3 features in IE6-8. I'm also using Cakephp (which I'm growing to love)

According to the instructions I just stick the PIE.htc file anywhere I want to and then add behavior: url(path/to/PIE.htc); to the CSS. So I have:

input[type=text]{
    width:348px;
    height:30px;
    border:1px solid #ddd;
    padding:3px;
    background:url(../img/formfieldbg.gif) repeat-x;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    vertical-align:top;
    behavior: url(path/to/PIE.htc);}

It also says: Note: this path is relative to the HTML file being viewed, not the CSS file it is called from.

I'm using Cakephp and no matter what I put for the path and no matter where I place the PIE.htc file I can't make it work! When I view it in IE6 my inputs still don't have the lovely rounded corners like they do in FF.

Answer 1

Try using an absolute path:

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

Note the leading forward slash. This way, no matter what the current page is, the path to the .htc file will remain the same.

A full URL will work too:

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

If you do use a full url, use a protocol relative url so you don't get insecure content warnings when switching to https.

A lot of elements need position:relative or zoom:1 when using PIE in order to behave in IE, make sure you check the known issues page and play around until you get it to work.