IE8 not displaying gradients below the viewport

On my intranet site, we are going to be upgrading to IE8. In IE6 I've no problems with display, however, when testing in IE8, I'm finding that any element on the page which has a filter:gradient set, shows up blank.

Here is an excerpt from my stylesheet that applies a colored gradient to the left cell of a table on one page (there are other gradients that I've set and they all do the same thing in IE8):

div.render, .render {
    background:transparent;
    position:relative;
    z-index:5000;
    }
#web { border-top: 2px solid #3868A0; }
.dlblue, .dlred, .dlgreen, .dlteal {
    color:#FFFFFF;
    font-weight:normal;
    width:30px;
    padding: 5px 10px 5px 2px;
    line-height: 18px;
    background-color:#EEEEEE;
    overflow:auto;
    }
.dlblue div, .dlred div, .dlgreen div, .dlteal div {
    text-align:center;
    text-shadow: -1px 1px 0px #FFFFFF;
    height:1em;
    filter:progid:DXImageTransform.Microsoft.Shadow(Color=#FFFFFF, Direction=135, Strength=1);
    -ms-filter:"progid:DXImageTransform.Microsoft.Shadow(Color=#FFFFFF, Direction=135, Strength=1)";
    /*filter:progid:DXImageTransform.Microsoft.DropShadow(OffX=2, OffY=2, Color=#FFFFFF, Positive='true');
    -ms-filter:"progid:DXImageTransform.Microsoft.DropShadow(OffX=2, OffY=2, Color=#FFFFFF, Positive='true')";*/
    }
.dlblue {
    color:#164680;
    border-left: 2px solid #3868A0;
    background: -moz-linear-gradient(left, #3868A0, #FFFFFF), #3868A0;
    filter:progid:DXImageTransform.Microsoft.Gradient(enabled=true,GradientType=1,startColorstr=#FF3868A0, endColorstr=#FFFFFFFF);
    -ms-filter:"progid:DXImageTransform.Microsoft.Gradient(enabled=true,GradientType=1,startColorstr=#FF3868A0, endColorstr=#FFFFFFFF)";
    }
.dlred {
    color:#990011;
    border-left: 2px solid #CC0033;
    background: -moz-linear-gradient(left, #CC0033, #FFFFFF), #CC0033;
    filter:progid:DXImageTransform.Microsoft.Gradient(enabled=true,GradientType=1,startColorstr=#FFCC0033, endColorstr=#FFFFFFFF);
    -ms-filter:"progid:DXImageTransform.Microsoft.Gradient(enabled=true,GradientType=1,startColorstr=#FFCC0033, endColorstr=#FFFFFFFF)";
    }
.dlgreen {
    color:#266006;
    border-left: 2px solid #488028;
    background: -moz-linear-gradient(left, #488028, #FFFFFF), #488028;
    filter:progid:DXImageTransform.Microsoft.Gradient(enabled=true,GradientType=1,startColorstr=#FF488028, endColorstr=#FFFFFFFF);
    -ms-filter:"progid:DXImageTransform.Microsoft.Gradient(enabled=true,GradientType=1,startColorstr=#FF488028, endColorstr=#FFFFFFFF)";
    }
.dlteal {
    color:#003640;
    border-left: 2px solid #005860;
    background: -moz-linear-gradient(left, #005860, #FFFFFF), #005860;
    filter:progid:DXImageTransform.Microsoft.Gradient(enabled=true,GradientType=1,startColorstr=#FF005860, endColorstr=#FFFFFFFF);
    -ms-filter:"progid:DXImageTransform.Microsoft.Gradient(enabled=true,GradientType=1,startColorstr=#FF005860, endColorstr=#FFFFFFFF)";
    }

I've tried everything I can think of to get it to display properly on the page, however, nothing gets the gradient to appear for any element which is initially below the viewport. Is this just an IE8 bug? If so, I'll find another way开发者_如何转开发 to style these items. If not, I'm open to suggestions on how to fix it.

Here is the code for one of the tables that use the style (the div render is used to fix text weirdness in IE - gradient issue exists with or without that applied and the PHP is just to render the text vertically in the column):

<table border="0" cellpadding="3" cellspacing="0" width="90%">    
<tr valign="top"><td ID="web" class="dlblue" width="25"><div class="render">
<img src="/icons/space.gif" width="30" height="1" alt="" border="0"><br>
<?
$browsertext = 'BROWSER TOOLS ';
$browsertools = wordwrap(preg_replace("/\s| |&nbsp;/", "  ", $browsertext), 1, "<br>\n", true);
echo $browsertools;
?>
</div></td>
<td ID="web">... other content for the table</td></tr>
</table>

Thanks! Let me know if more info is needed.

---

Yes ... I'm using some css to position my footer at the bottom of the page when the page content is shorter than the viewport (and places it inline at the end of content when scrolling is required).

I removed the css that takes care of the footer placement and voila, the gradients appear as expected. This didn't present in IE6 or FF, but since we are moving to IE8 corporate standard, I will change the design on those pages to something that appears all the time with the footer css. It's more important to keep the footer placement code than the gradients.

Thanks for mentioning that - would've never thought of that on my own - and I'll keep that in mind when designing future pages.