Linear-Gradient Using CSS3 Pie in Ie9 Not Working, Ie8 Does

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

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.

CSS3Pie v1.0 - No gradients in IE9, works in IE8

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.

PIE CSS works in IE9 but not IE8

I too faced the same issue and following was the reason for my problem:

• I used a wrong positioning for my DIV element.
• I was targeting the wrong path in behavior.

From your code, the problem seems to be in targeting the wrong path.

behavior: url(/owmw/web/css/PIE.htc);

FIX:
Instead try to refer the PIE.htc file in css folder and make it look like behavior: url(PIE.htc);
or

use behavior: url(owmw/web/css/PIE.htc);

Check out behavior property.

I might be wrong, but this solved my issue.

Even I tried using behavior: url(../owmw/web/css/PIE.htc); but not worked.

From your comments, it seems you're using X-UA-Compatible as a fix and it works only through IE10 compatibility mode.

!--  Force IE to use the latest version of its rendering engine -->  
<meta http-equiv="X-UA-Compatible" content="IE=edge">

By telling IE to use the latest version of its rendering engine in your page.
Incase if your user opens in IE8 browser? This will certainly fails.

You can check this in MSDN Library.

Hope you understand.

Missing PIE linear-gradient behavior in IE8 (but working in IE7 and IE9)

Thanks to the insights from @FelipeAls and @Spudley in the comments, I was able to resolve the situation.

Using @FelipeAls suggestion, I hardcoded the class into WordPress' menu editor, and removed the JavaScript which applied the class. This helped ensure the class was being applied and the PIE behavior rendered. But, the problem remained.

@Spudley was on the right track, and it led me to find this known issues doc for PIE. It was as simple as adding position: relative; to #navigation li.last.

#navigation li.last {
    [...]
    position: relative;
}

I don't know how I missed this as I was actually on the Known Issues page earlier today trying to diagnose why v2.0 was not recognizing custom JavaScript paths.

Thanks everyone for your help!

CSS3 PIE: linear-gradients don't work in IE9

Got it - for some reason, my server was caching an old version of PIE (Beta 4, which doesn't support IE9), even though I had uploaded Beta 5 (which does). I simply deleted PIE.htc entirely and re-uploaded it to force my server to pick up on the new version, and now it's working.

IE9 CSS3 Linear Gradients: Why does PIE CSS Gradients not work in IE9

Support for linear-gradient in IE9 in CSS3 PIE is currently under development. You can get a development build with initial support at http://css3pie.com/forum/viewtopic.php?f=4&t=933 -- testing and feedback are appreciated.

This IE9 support has lagged behind because, since IE9 supports most of the CSS3 features natively, the VML approach used in IE6-8 is not suitable and has had to be rewritten using SVG. It's a similar story for border-image support which is also under current development.

PIE styling with IE9 stopped working

I have used PIE.htc before to implement gradients in IE9, although I found SVG files to be a better way to do so.

Here you have an example of a SVG file:

<?xml version="1.0" ?>
<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" version="1.0" width="100%" height="100%" xmlns:xlink="http://www.w3.org/1999/xlink">

  <defs>
    <linearGradient id="myLinearGradient1" x1="0%" y1="0%" x2="0%" y2="100%" spreadMethod="pad">
      <stop offset="0%"   stop-color="#000000" stop-opacity="1"/>
      <stop offset="100%" stop-color="#48525C" stop-opacity="1"/>
    </linearGradient>
  </defs>

  <rect width="100%" height="100%" style="fill:url(#myLinearGradient1);" />
</svg>

To use it in your code, only do this:

header {
  background-image: url("svg-gradient.svg");
}

Gradients in Internet Explorer 9

You still need to use their proprietary filters as of IE9 beta 1.

---

Related Topics