title: CSS3PIE not working at all in IE
body: <p>I am trying to use a workaround for getting rounded corners in IE, by using <a href="http://css3pie.com" rel="nofollow">http://css3pie.com</a> . I have included the following in my css, which is getting loaded when the page loads. All of this is being loaded in Joomla 1.5 .</p>
  
  <pre><code>.form_field {color:#222 !important; border:2px solid #333; background:#f4f4f4;-webkit-    border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px; color:#fff; padding:2px 0px 2px 0px; position:relative; z-index:99999;
  behavior: url(./PIE.htc);
  </code></pre>
  
  <p>The above code is held in a css file called template.css.</p>
  
  <p>PIE.htc and PIE.php are located in the root of my website.</p>
  
  <p>Below, is some of the 'view source' generated when the page loads in IE 9 with rendering selected to IE 8 rendering mode.</p>
  
  <pre><code>      &lt;link rel="stylesheet" href="/sos/plugins/system/rokbox/themes/light/rokbox-style.css" type="text/css" /&gt;
        &lt;link rel="stylesheet" href="/sos/components/com_gantry/css/gantry.css" type="text/css" /&gt;
        &lt;link rel="stylesheet" href="/sos/components/com_gantry/css/grid-12.css" type="text/css" /&gt;
        &lt;link rel="stylesheet" href="/sos/components/com_gantry/css/joomla.css" type="text/css" /&gt;
        &lt;link rel="stylesheet" href="/sos/templates/sos/css/joomla.css" type="text/css" /&gt;
        &lt;link rel="stylesheet" href="/sos/templates/sos/css/customstyle.css" type="text/css" /&gt;
        &lt;link rel="stylesheet" href="/sos/templates/sos/css/extended.css" type="text/css" /&gt;
        &lt;link rel="stylesheet" href="/sos/templates/sos/css/sos-styles.css" type="text/css" /&gt;
        &lt;link rel="stylesheet" href="/sos/templates/sos/css/template.css" type="text/css" /&gt;
        &lt;link rel="stylesheet" href="/sos/templates/sos/css/typography.css" type="text/css" /&gt;
        &lt;link rel="stylesheet" href="/sos/templates/sos/css/fusionmenu.css" type="text/css" /&gt;
        &lt;script type="text/javascript" src="/sos/components/com_gantry/js/mootools-1.2.5.js"&gt;&lt;/script&gt;
        &lt;script type="text/javascript" src="/sos/plugins/system/rokbox/rokbox-mt1.2.js"&gt;&lt;/script&gt;
        &lt;script type="text/javascript" src="/sos/plugins/system/rokbox/themes/light/rokbox-config.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>As you can see from the above the template.css file is being loaded, if I go into chrome, the css3 border radius code is executed so I know the file is loading. For some reason the pie behaviour is not working though when the page is viewed in IE. The corners are just left square for some reason :-S . Even though they show as having the class 'form_field'. I have been through the troubleshooting docs on the CSS3PIE website but cant seem to find any solution what so ever.</p>
  
  <p>Edit >>>>>>>>>>>>>>>>>>>>>>>></p>
  
  <p>I have even tried putting it in its own css file in the root of my site  :</p>
  
  <p></p>
  
  <p>which when clicked on in source view loads the css file, so I know that is working, inside the css file I have @charset "utf-8";</p>
  
  <pre><code>/* CSS Document */
  .form_field {border-radius: 5px !important; color:#fff !important; padding:2px 0px 2px 0px      !important; position:relative !important; z-index:99999 !important;
  behavior: url(./PIE.htc) !important;}
  </code></pre>
  
  <p>so the only thing I can think of now, is that joomla is stripping something out, or its clashing with something else :-S .</p>
  
  <p>EDIT 2 >>>>>>>>>>>>>>>>>>>></p>
  
  <p>Ok, still no go, I have commented out all the js files from my index.php to make sure nothing is going to be clashing with it, and still no go.</p>
  
  <p>EDIT 3 >>>>>>>>>>>>>>>>>>>></p>
  
  <p>Finally !, for everyone else's benefit here is how to do this with Joomla and CSS3PIE. Not a clue why it wont work with PIE.htc , but if you use PIE.php instead this works.</p>
  
  <p>Make a css file called PIE.CSS , put this in your site root, inside it put :</p>
  
  <pre><code>@charset "utf-8";
  /* CSS Document */
  .YOURCLASSNAME {border-radius: 5px !important; color:#fff !important; padding:2px 0px 2px 0px       !important; position:relative !important; z-index:99999 !important;
  behavior: url(./PIE.php) !important;}
  </code></pre>
  
  <p>Next open up your template index.php file and put </p>
  
  <pre><code>&lt;link rel="stylesheet" type="text/css" href="./PIE.css" /&gt;
  </code></pre>
  
  <p>Next go to the whatever you want to style, e.g some form fields in an article and put :
  class="YOURCLASSNAME" on any fields / divs etc you want styling.</p>
  
  <p>This should then, fingers crossed work. :-)</p>