CSS3PIE not working at all in IE

Question

I am trying to use a workaround for getting rounded corners in IE, by using http://css3pie.com . 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 .

.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);

The above code is held in a css file called template.css.

PIE.htc and PIE.php are located in the root of my website.

Below, is some of the 'view source' generated when the page loads in IE 9 with rendering selected to IE 8 rendering mode.

      <link rel="stylesheet" href="/sos/plugins/system/rokbox/themes/light/rokbox-style.css" type="text/css" />
      <link rel="stylesheet" href="/sos/components/com_gantry/css/gantry.css" type="text/css" />
      <link rel="stylesheet" href="/sos/components/com_gantry/css/grid-12.css" type="text/css" />
      <link rel="stylesheet" href="/sos/components/com_gantry/css/joomla.css" type="text/css" />
      <link rel="stylesheet" href="/sos/templates/sos/css/joomla.css" type="text/css" />
      <link rel="stylesheet" href="/sos/templates/sos/css/customstyle.css" type="text/css" />
      <link rel="stylesheet" href="/sos/templates/sos/css/extended.css" type="text/css" />
      <link rel="stylesheet" href="/sos/templates/sos/css/sos-styles.css" type="text/css" />
      <link rel="stylesheet" href="/sos/templates/sos/css/template.css" type="text/css" />
      <link rel="stylesheet" href="/sos/templates/sos/css/typography.css" type="text/css" />
      <link rel="stylesheet" href="/sos/templates/sos/css/fusionmenu.css" type="text/css" />
      <script type="text/javascript" src="/sos/components/com_gantry/js/mootools-1.2.5.js"></script>
      <script type="text/javascript" src="/sos/plugins/system/rokbox/rokbox-mt1.2.js"></script>
      <script type="text/javascript" src="/sos/plugins/system/rokbox/themes/light/rokbox-config.js"></script>

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.

Edit >>>>>>>>>>>>>>>>>>>>>>>>

I have even tried putting it in its own css file in the root of my site :

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";

/* 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;}

so the only thing I can think of now, is that joomla is stripping something out, or its clashing with something else :-S .

EDIT 2 >>>>>>>>>>>>>>>>>>>>

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.

EDIT 3 >>>>>>>>>>>>>>>>>>>>

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.

Make a css file called PIE.CSS , put this in your site root, inside it put :

@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;}

Next open up your template index.php file and put

<link rel="stylesheet" type="text/css" href="./PIE.css" />

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.

This should then, fingers crossed work. :-)

Answer 1

Are you serving the htc file with the correct mimetype ? It should be served as text/x-component Also the file should not be served gzipped. Have you reviewed the following site: http://www.twinhelix.com/css/iepngfix/demo/ ?

Answer 2

I had this issue and drove me crazy for a while trying to figure it out. Turns out for me it was an anomaly with how IE interprets the behavior property...it's "behavior" is different from all the other URL's specified in a css property. This is from the CSS3PIE support:

• IE interprets the URL for the behavior property relative to the source HTML document, rather than relative to the CSS file like every other CSS property. This makes invoking the PIE behavior inconvenient, because the URL has to either be:

  • Absolute from the domain root — this makes the CSS not easily moveable between directories — or,
  • Relative to the HTML document — this makes the CSS not easily reusable between different HTML files.

So, if you have your PIE files in the root use URL('/PIE.htc'). I also needed to use the URL('/PIE.php') method so if you use PHP please try that too.