CSS3 Pie.htc (for older IE browsers) not working

[Nick1973]

I am trying to get CSS3 Pie working so that IE renders CSS3 correctly in legacy browsers.

I have followed the instructions, installed PIE.htc in the root of the website.

I've called it in my stylesheet as instructed like below with behavior: url(PIE.htc);:

#navMainWrapper {
width:98%;
height:50px;
position:relative;
margin:0px 0px 5px 0px;
padding:0% 1% 0% 1%;
border-radius: 50px 50px 50px 50px;
-moz-border-radius: 50px 50px 50px 50px;
-webkit-border-radius: 50px 50px 50px 50px;
background-color: #cccccc;
-webkit-box-shadow: 0px 3px 3px 0px rgba(50, 50, 50, 0.5);
-moz-box-shadow: 0px 3px 3px 0px rgba(50, 50, 50, 0.5);
box-shadow: 0px 3px 3px 0px rgba(50, 50, 50, 0.5);
behavior: url(PIE.htc);
position:relative;
zoom:1;
z-index:1000;
position:relative;
}

But it doesn't work in my Zen Cart. I have tested it using a HTML document on the same server and it works. I have also seen other posts relating to PIE.htc not working on Zen Cart on this forum but they also don't appear to have proper answers. So I wondered if anybody had any ideas why it doesn't appear to work and how to fix it.

[DrByte]

99% likely a problem with either the path to the file (ie: "url(PIE.htc)" is too generic, or case sensitive), or with restrictions in your .htaccess file.

Use your browser's Developer Tools / Inspector to investigate what's happening when it tries to load the .htc file, and what exactly the response is. If it's 404-not-found then you've got the wrong path specified and will need to be more specific; If it's 403-forbidden then you need to allow .htc files in your /includes/.htaccess

[Nick1973]

99% likely a problem with either the path to the file (ie: "url(PIE.htc)" is too generic, or case sensitive), or with restrictions in your .htaccess file.

Use your browser's Developer Tools / Inspector to investigate what's happening when it tries to load the .htc file, and what exactly the response is. If it's 404-not-found then you've got the wrong path specified and will need to be more specific; If it's 403-forbidden then you need to allow .htc files in your /includes/.htaccess

Well I can see the actual file code when I go to the URL.

[DrByte]

Okay, so that means it's not an .htaccess issue.

Probably your use of "url(PIE.htc)" is wrong, as it's using a relative path instead of absolute.
Maybe be explicit and tell it where to look, like: url(/includes/templates/my_template_folder/css/PIE.htc)

But, your browser's Inspection tools can tell you what response the browser is getting when trying to load the file, and that will also tell you what exact path it's trying to load ... which is the key.

[Nick1973]

Ok...well I think this might actually be server related. I have the site installed on a completely different server in some development space and its seeing the htc file. There are one or two issues though. for some reason its not liking the border-radius which is a big issue as I am using CSS3 border-radius cross browser across the site. However thats something to overcome. I don't think it is liking the CSS3 gradient that is applied as a background for a start so I may have to revert to images in IE 8 and 9...10 and 11 seem to be working fine though.

[Nick1973]

I managed to get this working and I am gradually working through IE 8 issues and I expect IE 9 issues to be very similar to IE 8. I suggest you view this site in something like Safari/Firefox and then view it in IE 8.

You can find the site I am working on here http://s01.ventureonlineuk.co.uk/~tapesdirectco

Certain elements aren't showing up in IE 8 such as Sideboxes and Prices. I am using CSS3 Pie to get certain elements to render like all other browsers and using this

behavior: url(pie.htc);
position:relative;
zoom:1;

in My IE 8 Stylesheet with the styles for IE8 to get them to render like a CSS3 browser.

I've attached some screenshots as well to give you an idea of my issues.

Safari
Attachment 16762

Internet Explorer 8
Attachment 16763

I wondered if anybody else had experienced similar issues in IE 8 and what the fix is please?

[Nick1973]

I've managed to fix this. I am using Adobe Typekit to render custom fonts in CSS3 enabled browsers. This does not work well in IE 8 and the javascript code that is issued by Adobe Typekit conflicts with certain zen cart elements. This is fairly easy and simple to fix. Just wrap the Javascript in the following:

<!--[if !IE 8]><!-->

<!--<![endif]-->

Like this example

<!--[if !IE 8]><!-->
<script>
(function() {
var config = {
kitId: 'YOURKITID',
scriptTimeout: 3000
};
var h = document.getElementsByTagName('html')[0];
h.className += ' wf-loading';
var t = setTimeout(function() {
h.className = h.className.replace(/(\s|^)wf-loading(\s|$)/g, ' ');
h.className += ' wf-inactive';
}, config.scriptTimeout);
var d = false;
var tk = document.createElement('script');
tk.src = '//use.typekit.net/' + config.kitId + '.js';
tk.type = 'text/javascript';
tk.async = 'true';
tk.onload = tk.onreadystatechange = function() {
var rs = this.readyState;
if (d || rs && rs != 'complete' && rs != 'loaded') return;
d = true;
clearTimeout(t);
try { Typekit.load(config); } catch (e) {}
};
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(tk, s);
})();
</script>
<script src="https://use.typekit.net/YOURKITID.js"></script>
<script>try{Typekit.load({ async: true });}catch(e){}</script>

<!--<![endif]-->