CODEWITHSUNDEEP
htmlcsscss3pie
Diodeus - James MacFarlane
Diodeus - James MacFarlane

Reputation: 114417

CSS3Pie v1.0 - No gradients in IE9, works 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, 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);).

Here is the CSS I am using:

.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);
}

enter image description here

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

I've already read this question, but since the demo works, and this question is about a year old, and PIE is now on version 1.0 that I must be doing something wrong.

Any idea on where to go from here?

Upvotes: 0

Views: 1001

Answers (2)

alancasagrande
alancasagrande

Reputation: 444

I was having a big headache because even with the correct content-type header (text/x-component), the linear-gradient wasn't working on IE9.

Upgrading to PIE 2.0 solved the issue.

http://css3pie.com/2013/01/28/pie-2-0-beta-1-released

(Same awnser I gave in this question: linear-gradient using CSS3 PIE in IE9 not working, IE8 does)

Upvotes: 0

lojjic
lojjic

Reputation: 791

Failure in IE9 is usually due to an incorrect content-type header. Other IE versions have this issue as well but IE9 seems to be more strict about it. See http://css3pie.com/documentation/known-issues/#content-type for details.

Upvotes: 2

Related Questions