Question

CSS3 Pie is a great tool to get some CSS3 stuff rendered in IE. Love it! But integration with WordPress seems to be pretty hard. Here’s the situation:

Html on a page template:

<div class="page_header_text center_shadow">
    <p>test12</p>
</div>

Function.php: (from http://www.position-relative.com/2011/04/using-css-pie-in-wordpress-themes-updated/ )

global $wp_styles; 
wp_enqueue_style(  "ie8", "http://dennishunink.nl/ghana/wp/wp-content/themes/ghanavakantie/style/iePie.css", false, $version_identifier, "all"); 
$wp_styles->add_data( "ie8", 'conditional', 'IE 8' );

The iePie.css:

.center_shadow{
position: relative;
behavior: url(PIE.htc);
}

Indeed, the iePie.css file is applied. For example, background:#000; is working. But in a strange way, the PIE.htc file doesn’t.

I tried different relative and absolute paths, uploaded PIE.htc in different locations.

The website is found at http://dennishunink.nl/ghana/wp/ (still developing)

Hopefully someone has an answer, would be very thankful for every suggestion!

Answer 1

Similar to CSS3 and PIE not working in IE 8

I have been having problems applying PIE on another project. If I recall correctly for me, in the end, it turned out to be a combination of specifying the right path, uploading the files in the right place and serving the right document type (with PIE.php).

The path:

I noticed that no matter where the CSS file is uploaded, behavior:url(PIE.php); will always refer to root/PIE.php.

Uploading:

Logically then, I uploaded PIE.php to the root. Along with PIE.htc.

Serving the right document type:

Documented on http://css3pie.com/documentation/known-issues/#content-type
PIE.php loads PIE.htc, serving it with the right document type, as follows:

<?php
header( 'Content-type: text/x-component' );
include( 'PIE.htc' );
?>

Hope it helps!