theflyingminstr
03-31-2009, 03:37 PM
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
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