CSS3 PIE Forums

V1.0 - No gradients in IE9, works in IE8
Page 1 of 1

Author:  Didoeus [ Wed May 30, 2012 9:28 am ]
Post subject:  V1.0 - No gradients in IE9, works in IE8

I've also posted this on StackOverflow: http://stackoverflow.com/questions/1081 ... rks-in-ie8

I am trying to get linear gradients to work with CSS3Pie (v1.0) and IE9.

Strangely the demo works on the CSS3Pie site with IE9 (home page), but using the same CSS used on the demo does not work on my site. It works with IE8, so I know that PIE is working and in the correct location (to test, it stops working if I comment out behavior: url(/css/PIE.htc);). Therefore: PIE is running.

.test {
padding: 20px;
text-align: center;
width: 200px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: #666 0px 2px 3px;
-moz-box-shadow: #666 0px 2px 3px;
box-shadow: #666 0px 2px 3px;
background: #FF7777;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#FF7777), to(#c40808));
background: -webkit-linear-gradient(#FF7777, #c40808);
background: -moz-linear-gradient(#FF7777, #c40808);
background: -ms-linear-gradient(#FF7777, #c40808);
background: -o-linear-gradient(#FF7777, #c40808);
background: linear-gradient(#FF7777, #c40808);
-pie-background: linear-gradient(#FF7777, #c40808);
behavior: url(/css/PIE.htc);

This is what I get: http://i.stack.imgur.com/sNNzK.png

I'd prefer not to use IE filters, since the demo seems to work without them.

Any ideas what to look for next?

Author:  Didoeus [ Wed May 30, 2012 10:19 am ]
Post subject:  Re: V1.0 - No gradients in IE9, works in IE8

The key is to have the correct MIME type, as described here: http://css3pie.com/documentation/known-issues

Serving the correct Content-Type

IE requires that HTC behaviors are served up with a content-type header of "text/x-component", otherwise it will simply ignore the behavior. Many web servers are preconfigured to serve the correct content-type, but others are not.

If you have problems with the PIE behavior not being applied, check your server configuration and if possible update it to use the correct content-type. For Apache, you can do this in a .htaccess file:

AddType text/x-component .htc
If for some reason you are unable to modify the server configuration (e.g. if you are on a shared host which does not allow custom .htaccess files), then you may also use a wrapper script. For instance, PIE includes in its distribution files a PHP script called PIE.php; this script simply serves up the PIE.htc file using the correct content-type header. To use it, simply make sure both PIE.php and PIE.htc are in the same directory, and then in your CSS point the behavior to the PHP file instead:

behavior: url(PIE.php);
Note that this issue is particularly a problem in IE 9, which seems more strict about the content-type than some other IE versions.

Page 1 of 1 All times are UTC - 7 hours [ DST ]
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group