Search code examples
htmlcssgradientcss3pie

PIE styling with IE9 stopped working

I had started a web page (for use with IE9, the local standard) using PIE styling for the gradient. The gradient worked, looked good. Started adding other features into the page, and the gradient disappeared. Took out all the changes I made, and it still didn't work.

When the page loads, you can see the gradient flash before the background is set to all white.

It does work in Chrome.

I don't understand what changed if I backed out all the changes I made to when the gradient worked.

<!DOCTYPE html>
<html>
    <head>
        <title>Training Registration Admin</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style type="text/css">
            hr{
                border-color: ivory; //Chrome and Safari
                background-color: ivory; //firefox and Opera
                color: ivory; //IE9
            }
            div, table{
                width: 100%;
            }
            html{
                height: 100%;
            }
            body{
                color: ivory;
                background: #000000;
                background: -webkit-gradient(linear, 0 0, 0 bottom, from(#000000), to(#48525C));
                background: -webkit-linear-gradient(#000000, #48525C);
                background: -moz-linear-gradient(#000000, #48525C);
                background: -ms-linear-gradient(#000000, #48525C);
                background: -o-linear-gradient(#000000, #48525C);
                background: linear-gradient(#000000, #48525C);
                -pie-background: linear-gradient(#000000, #48525C);
                behavior: url(stylesheets/PIE/PIE.htc);
            }
        </style>
    </head>
    <body>
        <div>
            <table>
                <tr>
                    <td style="width: 33%;text-align: center;">
                        <img src="images/traininglogo.png" />
                    </td>
                    <td style="width: 33%; text-align: center;">
                        <h1>Department Training Scheduler</h1>
                    </td>
                    <td style="width: 33%;text-align: center;">
                        <img src="images/traininglogo.png" />
                    </td>
                </tr>
            </table>
            <hr>
        </div>
    </body>
</html>
Solution

  • 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");
}