IE6 Scrolling Issue

[theflyingminst]

Hi I am using CSS to stretch my background image:


html {height:100%;}
body {height:100%; margin:0; padding:0;}
#bg {position:fixed; top:0; left:0; width:100%; height:100%;}
#content {position:relative; z-index:1;}
</style>

<!--[if IE 6]>
<style type="text/css">
html {overflow-y:hidden;}
body {overflow-y:auto;}
#bg {position:absolute; z-index:-1;}
#content {position:static;}
</style>
<![endif]-->

<div id="bg"><img src="images/bg.jpg" width="100%" height="100%" alt=""/></div>

<div id="content">

Site Contents..

</div>



I also have a Javascript slideshow within this page


<div style="float:left; padding-right:10px;">

<script type="text/javascript">
new fadeshow(fadeimages, 343, 258, 0, 4300, 0, "R")
</script>

</div>

<!--Also some of the Javscript Slideshow CSS-->

if (iebrowser&&dom||dom)
document.write('<div id="master'+this.slideshowid+'" style="position:relative;padding-top:15px;width:'+fadewidth+'px;height:'+fadeheight+'px;overflow:hidden;"><div id="'+this.canvasbase+'_0" style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;filter:progid:DXImageTr ansform.Microsoft.alpha(opacity=10);opacity:0.1;-moz-opacity:0.1;-khtml-opacity:0.1;background-color:'+fadebgcolor+'"></div><div id="'+this.canvasbase+'_1" style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;filter:progid:DXImageTr ansform.Microsoft.alpha(opacity=10);opacity:0.1;-moz-opacity:0.1;-khtml-opacity:0.1;background-color:'+fadebgcolor+'"></div></div>')
else
document.write('<div><img name="defaultslide'+this.slideshowid+'" src="'+this.postimages[0].src+'"></div>')



The problem is in IE6, this Javascript slideshow stays fixed on the bottom of the page and doesn't scroll with the page contents.

Any help is greatly appreciated!

Thank you