linear-gradient using CSS3 PIE in IE9 not working, IE8 does

Question

I've decided to completely drop support for IE6 and IE7 in my website, redirecting it's users to a text-only warning page. However I still support IE8 and IE9.

I am achieving this using CSS3 PIE, and border-radius works in both (IE8/9), box-shadow works in both, however I also rely on linear-gradient. I have heaps of tags in use to achieve this:

background: #E6E6E6; /* fallback */
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#E6E6E6), to(#B3BCC7)); /* old webkit */
background: -webkit-linear-gradient(#E6E6E6, #B3BCC7); /* new webkit */
background: -moz-linear-gradient(#E6E6E6, #B3BCC7); /* firefox */
background: -ms-linear-gradient(#E6E6E6, #B3BCC7); /* meant to be IE... */
background: filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#E6E6E6', endColorstr='#B3BCC7'); /* also meant to be IE... */
background: -o-linear-gradient(#E6E6E6, #B3BCC7); /* opera */
background: linear-gradient(#E6E6E6, #B3BCC7); /* W3C standard */
-pie-background: linear-gradient(#E6E6E6, #B3BCC7); /* PIE */

behavior: url(/PIE.htc); /* load PIE.htc */

linear-gradient works in IE8, but not IE9, oddly. I've tried any solutions I've found, but they haven't worked. IE8 just shows the fallback: background: #E6E6E6; - not a gradient.

I don't think it's anything wrong with the server or anything like that, because the other properties - border-radius and box-shadow - work with PIE but not without.

I've got all the properties to work in all browsers I support - just not IE9 :(

Any ideas?
Thanks

@vyegorov I'm new to this... why does it say you edited it? Is that just because you upvoted it or did you edit the question? — , May 05 '12 at 20:21
OK, I solved it. It's `filter: blablabla` not `background: filter: blablabla`. Now a new problem has introduced - the background is spilling out the body's border-radius. If you look closely you'll also see a little transparent gap at the side... http://img26.imageshack.us/img26/8360/ie9problems.png — , May 05 '12 at 20:33
Now I've deleted the whole `filter: ` statement as it breaks everything in IE8. Back to square one - how to do a linear gradient in IE 9 that doesn't leak outside of the rounded corners. It works in IE8, but not IE9! — , May 06 '12 at 02:32

score 6 · Accepted Answer · 2012-05-06T05:56:42.980

OK, here's my fix. It certainly isn't pretty, but it works.

<style type="text/css">
body{
  background: #E6E6E6;
  background: -webkit-gradient(linear, 0 0, 0 bottom, from(#E6E6E6), to(#B3BCC7));
  background: -webkit-linear-gradient(#E6E6E6, #B3BCC7);
  background: -moz-linear-gradient(#E6E6E6, #B3BCC7);
  background: -ms-linear-gradient(#E6E6E6, #B3BCC7);
  background: -o-linear-gradient(#E6E6E6, #B3BCC7);
  background: linear-gradient(#E6E6E6, #B3BCC7);
  -pie-background: linear-gradient(#E6E6E6, #B3BCC7);

  behavior: url(/PIE.htc); 
}
</style>

<!--[if IE 9]><style>body{ filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#E6E6E6', endColorstr='#B3BCC7'); behavior: url(/ie9-gradient-fix.htc); } </style><![endif]-->

EDIT: If anybody wants them, PIE.htc is found at http://www.css3pie.com and ie9-gradient-fix.htc is found at http://abouthalf.com/examples/ie9roundedbackgrounds/htc.zip. I couldn't get ie9-gradient-fix.htc to work unless it was in the root directory, PIE.htc worked in my /resources/ directory.

Thanks for this. Still relevant it seems as i still have problems with this in IE9 — Mansiemans, May 20 '13 at 20:38

score 5 · Answer 2 · answered May 06 '12 at 02:59

5

I don't think it's anything wrong with the server or anything like that, because the other properties - border-radius and box-shadow - work with PIE but not without.

PIE does not render border-radius and box-shadow in IE9 since IE9 supports both of those natively. So their presence is not an indication that PIE is working.

My guess is actually that your PIE.htc is being served with the incorrect content-type header -- IE9 is particularly strict about the content-type. See http://css3pie.com/documentation/known-issues/#content-type for details.

answered May 06 '12 at 02:59

lojjic

791
5
7

I've already done that. I meant by the text you quoted that nothing works in IE8 without PIE. I'm just about to post an answer though, I solved it. Thanks – May 06 '12 at 03:03
lojjic is correct, of course, in that the problem does not lie in the CSS rule as you've shown us, @duncan12, I made a fiddle (http://jsfiddle.net/D6jDP/2/) out of the code in your post. The gradient was displaying correctly for me in IE8,9 and Chrome, with and without the redundant "background: filter: progid:DXImageTransform.Microsoft.gradient" property. – sversch Jul 06 '12 at 06:13
1

Thanks @lojjic, I switched to serve PIE.php rather than PIE.htc which ensures the correct header is sent. IE9 is now playing nice. – patnz Aug 21 '12 at 03:37

score 2 · Answer 3 · answered Apr 03 '13 at 19:47

2

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

answered Apr 03 '13 at 19:47

alancasagrande

444
4
6

Thanks, works perfect. Much better and easier than what I used before. – Dani-Br Feb 07 '14 at 05:54

score 0 · Answer 4 · answered Dec 28 '12 at 08:53

0

Great! i used PIE.php and fixed this bug (linear-gradient + border-radius) in IE8, IE9!

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

answered Dec 28 '12 at 08:53

Feb Dao

46
4

Or you can add the code below to your htaccess file. Will have the same effect. Header set Content-type "text/x-component" – Dani-Br Feb 07 '14 at 05:55

score 0 · Answer 5 · answered Mar 09 '13 at 12:14

0

ie9-gradient-fix.htc worked for me in I.E. 9 but then again changing behavior from pie.htc to pie.php ALSO does the same thing.

The wheels turn oh so slowly at Microsoft but it appears they might also turn in opposite directions?

answered Mar 09 '13 at 12:14

Stormin Des

1

score 0 · Answer 6 · answered Jan 30 '14 at 00:49

In my case i was using <!--[if lt IE 9]>, changing it to <!--[if lt IE 10]> fixed my problem (of not actualy including my IE css file).

I think** <!--[if lte IE 9]> would do the same logic.

filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#88222222', EndColorStr='#00222222', GradientType=0);

PS. I am not using css3pie whatsoever (I thought I was, derp)

linear-gradient using CSS3 PIE in IE9 not working, IE8 does

6 Answers6

Linked