CSS3 PIE dont work in IE7 and IE8

Question

I've been doing some tests and I have not gotten it to work.

After I took the sample code from this page http://css3pie.com/documentation/getting-started/ but can not get the rounded look

The CSS is this

#prueba {
    border: 1px solid #999;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    behavior: url(PIE.htc);
}

The behavior property've tried both relative paths as absolute path of the type http://www.midomain.com/PIE.htc

Have you any idea why it does not work

Sorry for my English

Matanya · Answer 1 · 2012-12-21T12:47:14.987

0

probably a .htaccess problem, you need to define the content-type for the .htc files:

AddType text/x-component .htc

This way the content-type is sent as a header to IE. Without it IE simply ignores the .htc files

Look at the known issues

edited Dec 21 '12 at 12:47

answered Dec 21 '12 at 12:40

Matanya

6,233
9
47
80

I missed to mention that I also tried the htaccess and still does not work for me. Does the htaccess has to be next to the file PIE.htc truth? – Fraskito Dec 21 '12 at 12:44
it's .htaccess (dot), and it needs to be in the root directory with your index.php – Matanya Dec 21 '12 at 12:46
yes yes .htaccess. Look, for the test I have the following structure: - .htaccess - index.html - PIE.htc - style.css – Fraskito Dec 21 '12 at 12:51

score 0 · Answer 2 · answered Dec 27 '12 at 18:19

In my experience, PIE.htc can be tricky to implement; but once you work out a few kinks and become used to it's behavior it can become quite useful. Many of my larger client are still using IE7 and or IE8.

First, PIE.htc does not like shorthand CSS. Here is how I would declare your attributes.

#prueba {
    border: 1px solid #999;
    -webkit-border-radius: 10px 10px 10px 10px;
    -moz-border-radius: 10px 10px 10px 10px;
    border-radius: 10px 10px 10px 10px;
}

Secondly, you will need to declare the behavior in the section of the page you are applying it to; like so:

<style type="text/css">
    #prueba {
       behavior: url("PIE.htc");
       } 
</style>
</head>

This should work for you. A few things to keep in mind...

PIE.htc needs to be in the root of your site, you will have issues if you have to access it within a folder.
Sometimes calling the behavior will not work if the selector has a parent attribute. For example, if #prueba lies within another <div> like #content for example, you would use:

#content #prueba { behavior: url("PIE.htc"); }
1. I always call my PIE.htc right before the closing </head> tag. It doesn't have to be, but I find it always works this way.

Hopefully this helps. Most of these issues can be found in the documentation on css3pie.

I am testing what he says and now I changed something but still not working. Before changed nothing, and in doing so I removed the styles. No PIE.htc like putting in the root, as I use Django and interprets it as a url that does not fit with anything — Fraskito, Dec 28 '12 at 17:59

CSS3 PIE dont work in IE7 and IE8

2 Answers2