3

I am trying to get CSS3PIE to work for my site so I can use border-radius in IE8 (and earlier). It works fine in all other browsers. Here's my CSS:

#body_text_design{
    border:2px solid black;
    background-color:#CCC;
    background-image:url(../pics/designbg.png);
    font-family:"Britannic Bold";
    color:black;
    height:676px;
    width:675px;
    -webkit-border-radius:10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    margin-top:23px;
    overflow:hidden;
    behavior: url(PIE.htc);
    }

And my HTML:

<div id="body_box">
    <div id="body_text_design">

    <div class="design_text_div">
    <h1>Test test test</h1>
    <br />
    <br />
    <br />
    <h3>Bla bla bla</h3> 
    <h3>Test test test</h3>
    </div>

    </div>
</div>

I have tried all the debugging that I could find such as:

  • tried the PHP solution
  • tried a full http:// link to the PIE.htc file
  • added AddType text/x-component .htc to my .htaccess file
  • tried position:absolute and zoom:1 and z-index values.

Nothing has worked so far. I envy those that have gotten this just by adding the behavior property to their CSS. If anybody could help, that would be greatly appreciated!

EDIT

Here's a jsfiddle:

http://jsfiddle.net/3aWVH/1/

MillerMedia
  • 3,651
  • 17
  • 71
  • 150
  • can you create an example for better understanding – sandeep Feb 02 '12 at 04:04
  • your code works for me. Make sure the path to your htc file is correct. i tested it on my local pc tho. eg path: C:\Users\...\test.html Not sure if it is a issue of your server setting or sth – Shadow_boi Feb 02 '12 at 04:45
  • Yeah I've had the PIE.htc in the right location. I even actually put it in multiple folders just to make sure it was in the right place somewhere and it didn't work. I'm having trouble testing it on my local PC because all I have is a Mac right now and IE8 isn't available for Mac. The only other thing I can think is that it has something to with GoDaddy (they host the site I'm designing). I've Googled but can't find any hard facts that there are permission issues with htc files with GoDaddy. Any ideas on that? – MillerMedia Feb 02 '12 at 05:14
  • Can you try placing the behavior style immediately after the border radius definitions and see if that helps? – Sagar Patil Feb 06 '12 at 06:57

3 Answers3

3

Make sure you are not testing locally. .htc files needs to be hosted on server and css3 pie will work only in web container

Pranay Kondekar
  • 39
  • 3
  • This. Kind of a weird issue to have, but testing it on my publically accessible staging environment did the trick. – dKen Apr 04 '14 at 10:41
  • @Pranay Krondekar: thx for the tip, this is the kind of information that should be displayed on CSS3PIE official website & documentation – Adriano Jun 04 '14 at 19:20
0

I have access to the .htaccess but it made no difference adding AddType text/x-component .htc, however using the PIE.php did work (although I had been using a mistyped path at first so took me 3 days to work out that the php really did work all along!)... anyway, all looking good now!

Prasad Jadhav
  • 5,090
  • 16
  • 62
  • 80
gray
  • 1
0

I was struggling with this problem for awhile and finally figured it out!

Some servers don't recognize the .htc file so you have to add the Content-type to your .htaccess file by putting this:

AddType text/x-component .htc

It's on the known issues page of the documentation http://css3pie.com/documentation/known-issues/

Syren
  • 1,961
  • 2
  • 15
  • 19