When the height of a div is greater than the window in IE8, the background specified with -ms-filter disappears. However, this issue does not occur in IE7 and earlier versions. (One workaround could be using a 1px transparent image, but what if I want to use a transparent color along with a background image?)
Check out the sample code and fiddle below:
<!DOCTYPE html>
<html lang="sk">
<head>
<meta charset="utf-8">
<style>
html,body{height:100%;margin:0;padding:0;}
#one{
float:left;
height:100%;
width:50%;
background:rgba(0,0,0,0.5);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#CC917C6F,endColorstr=#CC917C6F)";
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#CC917C6F,endColorstr=#CC917C6F);
}
#two{
float:right;
height:101%;
width:50%;
background:rgba(255,0,0,0.5);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#CCAAAA6F,endColorstr=#CCAAAA6F)";
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#CCAAAA6F,endColorstr=#CCAAAA6F);
}
</style>
</head>
<body>
<div id="one"></div>
<div id="two"></div>
</body>
</html>
http://jsfiddle.net/9dmqg/4/ Thank you.