A while ago, I created a web page specifically for IE9 with some PIE styling for a nice gradient effect. The gradient looked great initially, but as I added more features to the page, it suddenly disappeared. Even after reverting back to the original version, the gradient still wouldn't show up.
Interestingly, when the page loads, there's a brief moment where you can see the gradient before it changes to all white.
Just to add to the mystery, everything seems to be working perfectly fine in Chrome.
I'm at a loss trying to figure out what went wrong since removing all the modifications didn't solve the issue.
<!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>