Can't get CSS3Pie to work

Question

I feel so stupid, like I'm missing something really obvious but I have checked everything a bunch and can't figure out what's wrong. I'm trying to use CSS3pie to make rounded corners in ie8, but it just won't take.

I have the path set up relative to the html document, not the css. It's in a folder called pie, so this is what i'm using in the CSS:

#recommended-acc {
float: left;
width: 472px;
background: url(../img/cont_bg.png) repeat;
margin: 10px;
padding: 0 10px 6px 0;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
behavior: url(pie/PIE.htc);
border-radius: 5px;
border: 1px #d8d8d8 solid;
 }

Does anyone know more about css3 pie who could maybe advise me on what I'm missing? I've tried it on a ton of different elements and it hasn't worked once.

Answer 1

A few things to try:

• Use a leading forward slash in your path:

  behavior: url(/pie/PIE.htc);
  

  This will make sure the path is correct in case you are on a page with more than one URI segment, like http://example.com/pages/archives/mypage.html. WIthout the leading forward slash, it would be relative from mypage.html and not the root directory (which it should be).

• Try to force hasLayout (obscure IE thing) by adding position:relative; or zoom:1 to the element. This is often the issue, the HTC file is referenced correctly but the styles won't apply without it.

Read the known issues page carefully and make sure you aren't experiencing any of the other multitude of common problems.

Answer 2

HOW to make sure your HTC file loads..

1. put below <script type="text/javascript"> alert("test"); this alerts test when the file loads
2. put in the complete url in your css file behavior: url("http://www.yourwebsite.com/test/PIE.htc"); WHen you load the page an alert shows up :)
3. this means you are sure the file loads :)
4. now shorten the behavior: url("relative to the CSS-FILE/PIE.htc"); and make sure you still get the alert
5. remove the alert =)

You are now 100% sure it is using the HTC file

Answer 3

I struggled with this, All I can suggest is try this. Use the Javascript version with jQuery

    <!--[if lt IE 9]>
          <script type="text/javascript" src="js/PIE_IE678.js"></script>
        <![endif]-->
        <!--[if IE 9]>
          <script type="text/javascript" src="js/PIE_IE9.js"></script>
        <![endif]-->

  <!--[if IE]>
            <link rel="stylesheet" type="text/css" href="css/ie.css"/>
            <script>
               $(function() {
                if (window.PIE) {
                    $('.Circle').each(function() {
                        PIE.attach(this);

                      //  alert("Attached");
                    });
                }
            });
            </script>

           <![endif]-->

Now in your CSS, with the .Circle class or any class which is using the CSS 3, give them:

zoom: 1; position: relative;

One other note I have found when using jQuery & the migrate plugin - some are "finicky" these work.

<script src="http://code.jquery.com/jquery-1.9.0.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.js"></script>

With luck, that will do the trick.

Answer 4

Guys i found the problem you where looking for. First of all I used 2 different web host. 1 of my own and 1 of the company.

I made my full css3 responsive webdesign hand coded on my own website.. which I needed the PIE.htc file to get the rounded corners working for all IE versions and I succeeded!.

However when I uploaded the same files to the web host of my company it didn't work anymore. And it turns out that they doesn't support .htc files. So I scratched my head and didn't get it right either, but then I discovered that this provider will work with the PIE.php file.

So if for you this doesn't work;

.bg {
    border-radius:60px;
    width: 80%;
    height: 85%;
    position: fixed;
    top: 10.2%;
    left: 18%;
    z-index: 1;
    border:3px solid #fff; 
    background:#fff;
    behavior: url(pie/PIE.htc);

Than this does;

.bg {
    border-radius:60px;
    width: 80%;
    height: 85%;
    position: fixed;
    top: 10.2%;
    left: 18%;
    z-index: 1;
    border:3px solid #fff; 
    background:#fff;
    behavior: url(pie/PIE.php);

Just change the PIE.htc to PIE.php and it will work.

Answer 5

I too had these problem in my earlier days.

You've to keep the pie.htc file generally in the root of the project folder.

I know the following solution is a little weird but you could try it

Try adding an alert or console in the pie.htc file and place the file in each folder until it gets rendered.