CSS3 PIE Setup help

[DivaVocals]

So I've been messing around with CSS3 PIE.. (http://css3pie.com/) I've found a few posts on this forum talking about it's use, but unfortunately none of the posts provided the details I need to get this thing working..

So here's what I did..

1. I copied the PIE.htc file to a folder called includes/CSS3_PIE (this is the ONLY thing in this folder)
2. I added this to my stylesheet:
   

   behavior: url(includes/CSS3_PIE/PIE.htc);

3. I added htc to the FilesMatch directive in the includes/.htaccess file.

And it doesn't seem to be working.. What did I do wrong here.. Hoping someone can help me out with some details on how to configure CSS3 PIE with Zen Cart??

[Design75]

I have pie.htc in the root of the site (public_html/pie.htc), and that seems to be working for me. The important thing is that the pie.htc pat is relative to your web root.

Like you i have a site layout without images A good tool to achieve this is making use of sass and compass. COmpass generates most of the browser compatible css for you, like the -moz and -khtml extensions.

Example of generated css:

#menu {
  list-style: none;
  width: 1026px;
  margin: 30px auto 0 auto;
  height: 43px;
  padding: 0 20px 0 20px;
  -webkit-border-radius: 10px;
  -khtml-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
  background: #014464;
  background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL######ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAyNzJhNyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAxMzk1MyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #0272a7), color-stop(100%, #013953));
  background: -webkit-linear-gradient(#0272a7 0%, #013953 100%);
  background: -moz-linear-gradient(#0272a7 0%, #013953 100%);
  background: -o-linear-gradient(#0272a7 0%, #013953 100%);
  -pie-background: linear-gradient(#0272a7 0%, #013953 100%);
  background: linear-gradient(#0272a7 0%, #013953 100%);
  -webkit-box-shadow: inset 0 0 1px 0 #edf9ff;
  -moz-box-shadow: inset 0 0 1px 0 #edf9ff;
  box-shadow: inset 0 0 1px 0 #edf9ff;
}

[DivaVocals]

Thanks for the response and the tips..

So if I put PIE.htc in the root, am I correct that this is what I include in my stylesheet:

behavior: url(/PIE.htc);

I have pie.htc in the root of the site (public_html/pie.htc), and that seems to be working for me. The important thing is that the pie.htc pat is relative to your web root.

Like you i have a site layout without images A good tool to achieve this is making use of sass and compass. COmpass generates most of the browser compatible css for you, like the -moz and -khtml extensions.

Example of generated css:

#menu {
  list-style: none;
  width: 1026px;
  margin: 30px auto 0 auto;
  height: 43px;
  padding: 0 20px 0 20px;
  -webkit-border-radius: 10px;
  -khtml-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
  background: #014464;
  background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL######ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAyNzJhNyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAxMzk1MyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #0272a7), color-stop(100%, #013953));
  background: -webkit-linear-gradient(#0272a7 0%, #013953 100%);
  background: -moz-linear-gradient(#0272a7 0%, #013953 100%);
  background: -o-linear-gradient(#0272a7 0%, #013953 100%);
  -pie-background: linear-gradient(#0272a7 0%, #013953 100%);
  background: linear-gradient(#0272a7 0%, #013953 100%);
  -webkit-box-shadow: inset 0 0 1px 0 #edf9ff;
  -moz-box-shadow: inset 0 0 1px 0 #edf9ff;
  box-shadow: inset 0 0 1px 0 #edf9ff;
}