Trying to implement CSS3PIE for my website to enable border-radius in IE8 (and older versions). The code works perfectly on all other browsers except IE. Below is the CSS I am using:
#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 here's the corresponding 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>
Despite trying several debugging methods like the PHP solution, using a full http:// link for PIE.htc file, adding AddType text/x-component .htc to .htaccess file, and trying different CSS properties like position:absolute, zoom:1, and adjusting z-index values, nothing seems to work. I'm struggling while others seem to have success by simply adding the behavior property to their CSS. Any help would be greatly appreciated!
EDIT
For reference, here's the jsfiddle link: