CSS3 PIE Forums
http://css3pie.com/forum/

gradient backgrounds work in ie8 but not ie9
http://css3pie.com/forum/viewtopic.php?f=6&t=2040
Page 1 of 1

Author:  inorganik [ Fri Apr 12, 2013 11:13 am ]
Post subject:  gradient backgrounds work in ie8 but not ie9

Hi,

I'm using the PIE2 beta, it and is working beautifully with ie8. All of the CSS3 decorations work.

I'm using the -pie-background rule for a lot of gradient backgrounds. All of these backgrounds render just fine on ie8. However, in ie9, all of the CSS3 decorations are rendered EXCEPT the gradient backgrounds. Image backgrounds work just fine.

I tried removing my IE stylesheet for ie9 (and with it PIE), and it looks the same, suggesting ie9 may not be using (or needing) pie at all.
But putting it back gives the same result. My IE-only rule does include ie9:

Code:
<!--[if lt IE 10]>
   <link rel="stylesheet" type="text/css" href="_assets/ie.css" />
<![endif]-->


An example of one of my -pie-background rules:
Code:
-pie-background: linear-gradient(to bottom, #CCCCCC 0%, #FFFFFF 100%);


The javascript files -
Code:
PIE_IE678.js
PIE_IE9.js

Are both on the server. Any ideas what might be wrong?

Thanks. :D

Author:  michaelherring [ Fri Apr 12, 2013 3:00 pm ]
Post subject:  Re: gradient backgrounds work in ie8 but not ie9

Have you tried changing

Code:
<!--[if lt IE 10]>
   <link rel="stylesheet" type="text/css" href="_assets/ie.css" />
<![endif]-->


to

Code:
<!--[if lte IE 9]>
   <link rel="stylesheet" type="text/css" href="_assets/ie.css" />
<![endif]-->


I'm pretty sure any mention of '10' in conditional comments gets ignored by all IE versions, as conditional comments are no longer used in IE10.

Author:  rulernature [ Tue Apr 16, 2013 8:51 am ]
Post subject:  Re: gradient backgrounds work in ie8 but not ie9

IE9 is very stupid with gradients so you have 2 options.
1: cut on photoshop 1px from saved .png and use it with repeat-x
2: take a screen shoot and save as gradient image after that convert your gradient background with: http://websemantics.co.uk/online_tools/ ... convertor/.

Author:  jason [ Tue Apr 16, 2013 10:27 am ]
Post subject:  Re: gradient backgrounds work in ie8 but not ie9

Off the top of my head I'd check that the htc file is being served with the correct content-type header -- IE9 is particularly strict about that whereas other versions are sometimes more lenient.

Have you inspected the HTTP traffic to see what files IE9 is requesting? To make sure it's loading your conditional stylesheet and the PIE files.

Author:  inorganik [ Mon Apr 22, 2013 11:01 am ]
Post subject:  Re: gradient backgrounds work in ie8 but not ie9

Hi all, my conditional -

Code:
<!--[if lt IE 10]>
   <link rel="stylesheet" type="text/css" href="_assets/ie.css" />
<![endif]-->


Is successfully including the ie stylesheet. Since pie is working in older versions of IE, I can rule out whether the necessary files are being included.

Jason, what's a good way to check if the htc is being served with the correct content-type header in IE9?

Author:  jason [ Tue Apr 23, 2013 9:19 am ]
Post subject:  Re: gradient backgrounds work in ie8 but not ie9

Use a network proxy like Fiddler to inspect the requests it's making. Or perhaps IE9's own built-in developer tools will let you see the network requests and their response headers.

Author:  erickthedesigner [ Tue Aug 27, 2013 6:40 pm ]
Post subject:  Re: gradient backgrounds work in ie8 but not ie9

Not working for me in IE 9 either.

I'm using:
Code:
-pie-background: linear-gradient(135deg, #ffffff 36%, #dddddd 100%); /*ie 6-9 via PIE*/
behavior: url(PIE.htc);


IE 8 works great! But not IE9. Also tried "to right" and still no result. Any recent word on this?

Page 1 of 1 All times are UTC - 7 hours [ DST ]
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group
http://www.phpbb.com/