Search code examples
internet-explorercsscss3pie

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

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.

Solution

  • 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.