Forums
View unanswered posts | View active topics It is currently Sun Nov 23, 2014 8:51 pm



Reply to topic  [ 2 posts ] 
 V1.0 - No gradients in IE9, works in IE8 
Author Message

Joined: Tue May 29, 2012 3:13 pm
Posts: 2
Post 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.

Code:
.test {
padding: 20px;
text-align: center;
width: 200px;
height:100px;
-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;
position:relative;
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?


Wed May 30, 2012 9:28 am
Profile

Joined: Tue May 29, 2012 3:13 pm
Posts: 2
Post 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.


Wed May 30, 2012 10:19 am
Profile
Display posts from previous:  Sort by  
Reply to topic   [ 2 posts ] 

Who is online

Users browsing this forum: No registered users and 4 guests


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group.
Designed by STSoftware for PTF.