CSS3 PIE Rounded Corners IE8 Issue

CSS:
.johntest {  
border: 1px solid #696;
padding: 60px 0;
text-align: center; width: 200px;
-webkit-border-radius: 18px;
-moz-border-radius: 18px;
border-radius: 18px;
background: #EEFF99;
behavior: url(http://www.mywebsite.com/client/clientname/pie/PIE.htc);
}

Open in new window


HTML Code:
<div class="johntest"></div>

Open in new window


The div is not displaying any rounded corners. Am I missing something?
LanmarkianAsked:
Who is Participating?
 
LanmarkianAuthor Commented:
I figured it out.

This line needs to be in the .htaccess file
AddType text/x-component .htc

Thanks for the help!
0
 
Chris StanyonCommented:
Your code works perfectly fine for me in IE8 (emulated). Make sure the path to your PIE.htc is correct.
0
 
LanmarkianAuthor Commented:
Hmmm...

The path is correct. I am using this in WordPress. Do you think that might have something to do with it?
0
 
Chris StanyonCommented:
Not sure, but the path to your PIE doesn't look like the normal path for WordPress assets. Normally, they'd sit somewhere in your theme folder.

Try it outside of your WordPress site with a very simple page. If nothing else, it will take WordPress out of the equation while your testing and make it easier to identify problems.
0
 
LanmarkianAuthor Commented:
Wow - so I put it outside in the root of the site where the pie folder is located. It's still not working! Could this be a server issue?

<style type="text/css">
.johntest {  
border: 1px solid #696;
padding: 60px 0;
text-align: center; width: 200px;
-webkit-border-radius: 18px;
-moz-border-radius: 18px;
border-radius: 18px;
background: #EEFF99;
behavior: url(pie/PIE.htc);
}
</style>

Open in new window

0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.