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.

score 14 · Accepted Answer · answered Aug 10 '11 at 03:23

14

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.

answered Aug 10 '11 at 03:23

Wesley Murch

101,186
37
194
228

Hi there, thanks for the answer. I've tried putting a forward slash, what I have is behavior: url(/PIE.htc); and I've tried putting the PIE.htc file in app/ in app/webroot in app/views etc but still it doesn't seem to be picking it up. Any ideas what might be going wrong? thanks – julia Aug 10 '11 at 11:30
Have you tried directly navigating to the url (in the address bar) to make sure you can access it? Try putting it in the same directory as your CSS file to be sure. – Wesley Murch Aug 10 '11 at 12:30
Yeah in the address bar if I type in localhost/myproject/PIE.htc it appears. I've tried putting the file just about everywhere now. It defo should work with with border-radius on text input fields shouldn't it. – julia Aug 10 '11 at 13:10
`behavior: url(/PIE.htc);` or `behavior: url(/myproject/PIE.htc);` should work for you then (depending where your project's root actually is). It *should* work on inputs, but to be sure it is loading I would suggest copy/pasting the HTML/CSS from the example on PIE's home page until you see it working. You also may need to add `AddType text/x-component .htc` to your .htaccess if you are using one. – Wesley Murch Aug 10 '11 at 13:15
Hi, thanks so much for helping by the way. I've tried testing on a new page and not using inputs but just plain divs and I've found out that when I have behavior: url(/myproject/PIE.htc); it has an effect. But unfortunately the effect is to remove the border completely - with inputs the text box disappears completely?!? But at least it must be picking the htc file up since is has SOME effect. I guess there must be something wrong with my other css which is causing weird behaviour? Julia – julia Aug 10 '11 at 14:55
Julia, see the closing part in my answer and read the FAQs on the PIE site. A lot of elements need a little extra help for IE, like `position:relative` or `zoom:1`. PIE is not perfect, there are some things that will still not work or require additional workarounds. – Wesley Murch Aug 10 '11 at 14:58
Thanks, I did a bit of starting again from scratch and it does seem to work. I guess I'll have to start again at the beginning again and see exactly where the problems start happening. Best way to learn I guess. Thanks for all the advice and your time. – julia Aug 10 '11 at 15:39

score 1 · Answer 2 · answered Apr 20 '12 at 18:53

You need to specify the pie.php file. Its content is like below:

<?php
/*
This file is a wrapper, for use in PHP environments, which serves PIE.htc using the
correct content-type, so that IE will recognize it as a behavior.  Simply specify the
behavior property to fetch this .php file instead of the .htc directly:

.myElement {
    [ ...css3 properties... ]
    behavior: url(PIE.php);
}

This is only necessary when the web server is not configured to serve .htc files with
the text/x-component content-type, and cannot easily be configured to do so (as is the
case with some shared hosting providers).
*/

header( 'Content-type: text/x-component' );
include( 'PIE.htc' );
?>

That should solve the issue.

score 1 · Answer 3 · answered Sep 13 '13 at 13:42

I was using CodeIgniter with a mod_rewrite. Based on Septagram's answer I got the following to work

RewriteEngine on

RewriteCond %{REQUEST_FILENAME} -s [OR]
RewriteCond %{REQUEST_FILENAME} -l [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^.*$ - [NC,L]

#if the url contains PIE.php redirect to the folder containing PIE.php
RewriteCond %{REQUEST_URI} PIE.php$
RewriteRule ^.*$ css3pie/PIE.php [NC,L]

#else just redirect to index
RewriteRule ^.*$ index.php [NC,L]

Hope this helps someone

Septagram · Answer 4 · 2012-10-13T17:48:31.707

0

If you happen to be using mod_rewrite, than the following little hack might be for you:

RewriteRule /PIE.htc$ PIE.htc [L]

Add this to .htaccess and voila! Now PIE.htc is magically present in every folder :)

edited Oct 13 '12 at 17:48

answered Oct 13 '12 at 08:37

Septagram

9,425
13
50
81

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

4 Answers4

Linked