1) Script Title: Dynamic Ajax Content

2) Script URL (on DD):
http://www.dynamicdrive.com/dynamici...jaxcontent.htm

3) Describe problem:

Hi,

The Dynamic Ajax Content script works fine, except for one thing.
Upon loading the external page, the left and right background images (looks like film frames) on the ORIGINAL page does not extend top to the bottom. At 1280x1024 and higher resolutions, all looks fine, but at lower resolutions (eg 800x600) the background images fall short of going to the bottom of the page.

I have played around with "height:100%" & "overflow:visible" on several divs, but to no avail.

Here is the location:http://www.inatheaternearyou.com/pea...k-moments.html

Can anyone assist me on this please?

Below, please find my code:
HTML Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Peak Moments in Film</title>
<style type="text/css">
<!--
html
{
	height:100%;
	width:100%;
}

body 
{
	
	background-color:#e9e3d5;
	height:100%;
	font-family:tahoma, Verdana, "Trebuchet MS", sans-serif;
	font-size:10pt;
}

#wrapper
{
	height:100%;
	margin:0px;
	padding:5px;
	overflow:visible
}

.topleft {
background: url(images/film-border.png);
background-repeat:repeat-y;
background-position:left;
padding-top:10px;
margin-top:0px;
height:100%;
}

.topright 
{
background: url(images/film-border.png);
background-repeat:repeat-y;
background-position:right;
margin-top:-10px;
padding-top:10px;
height:100%;
}

#main
{
	margin:0 50px 0 50px;
	text-align:justify;	
}

#main p
{
	text-align:justify;	
}
#genres{
width:460px; /*(100px+ 5pxL/Rmargin) X 3*/
margin: 0 auto; /*centers in FF/Moz/etc */
text-align:center; /*centers in IE5.x*/
}
.type{
float:left;
width:100px;
margin:0 5px -5px 5px; 
padding:0px;

}

p
{
padding:0 0px 10px 0;
text-align:left;
margin:0px;

}

#films
{
	margin:0 0 0 50px;
	float:left;
	clear:both;
}

#films a
{
	color:#FF0000
}


.bigfont
{
	font-size:12pt;
}
.biggerfont
{
	font-size:18pt;
}
-->
</style>
<script type="text/javascript">

/***********************************************
* Dynamic Ajax Content- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

var bustcachevar=1 //bust potential caching of external pages after initial request? (1=yes, 0=no)
var loadedobjects=""
var rootdomain="http://"+window.location.hostname
var bustcacheparameter=""

function ajaxpage(url, containerid){
var page_request = false
if (window.XMLHttpRequest) // if Mozilla, Safari etc
page_request = new XMLHttpRequest()
else if (window.ActiveXObject){ // if IE
try {
page_request = new ActiveXObject("Msxml2.XMLHTTP")
} 
catch (e){
try{
page_request = new ActiveXObject("Microsoft.XMLHTTP")
}
catch (e){}
}
}
else
return false
page_request.onreadystatechange=function(){
loadpage(page_request, containerid)
}
if (bustcachevar) //if bust caching of external page
bustcacheparameter=(url.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime()
page_request.open('GET', url+bustcacheparameter, true)
page_request.send(null)
}

function loadpage(page_request, containerid){
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))
document.getElementById(containerid).innerHTML=page_request.responseText
}

function loadobjs(){
if (!document.getElementById)
return
for (i=0; i<arguments.length; i++){
var file=arguments[i]
var fileref=""
if (loadedobjects.indexOf(file)==-1){ //Check to see if this object has not already been added to page before proceeding
if (file.indexOf(".js")!=-1){ //If object is a js file
fileref=document.createElement('script')
fileref.setAttribute("type","text/javascript");
fileref.setAttribute("src", file);
}
else if (file.indexOf(".css")!=-1){ //If object is a css file
fileref=document.createElement("link")
fileref.setAttribute("rel", "stylesheet");
fileref.setAttribute("type", "text/css");
fileref.setAttribute("href", file);
}
}
if (fileref!=""){
document.getElementsByTagName("head").item(0).appendChild(fileref)
loadedobjects+=file+" " //Remember this object as being already added to page
}
}
}

</script>

</head>

<body>
<div id="wrapper">
	<div class="topleft">
	<div class="topright">  
   	<div id="main">
	<p>
	<span class="biggerfont">P</span>sychologist Abraham Maslow described &quot;Peak Experiences&quot; as <dfn>moments when individuals feel at their very best, moments of great awe, intense happiness, rapture, bliss, ecstasy</dfn>. These moments provide a cresting awareness of profound goodness, justice, validation, and harmony.
	</p>
	<p>
	<span class="bigfont">W</span>hile the above definition refers to the individual
	experience, a film can likewise reach a juncture wherein it escapes the bounds
	of the ordinary and expected, becoming transcendent, mythical in scale, and
	indeed, even spirtual in nature.  Correspondingly, these 'Peak Moments' in a movie
	can also instill towering feelings of elation and transport to those experiencing them.
	</p>
	<p>
	<span class="bigfont">D</span>on't worry, 
	</p>
	</div>
	<div id="genres">
<div class="type">

<p>Drama</p>
</div>
<div class="type">

<p>SciFi</p>
</div>
<div class="type">

<p>Western</p>
</div>
<div class="type">
  <p>Musical</p>
</div>
<div class="type">
  <p>Sports</p>
</div>
<div class="type">
  <p>Comedy</p>
</div>
<div class="type">
  <p>Animation</p>
</div>
<div class="type">
  <p>Horror</p>
</div>
</div> 
	<div id="films">
	<p><a href="javascript:ajaxpage('lion-king.html', 'contentarea');">The Lion King</a></p>
	<div id="contentarea">
	</div>

	<p><a href="javascript:ajaxpage('fast-times-pool.html', 'contentarea');">Fast Times at Ridgemont High : The Pool Scene</a></p>
	<div id="contentarea">
	</div>
	
	<p><a href="javascript:ajaxpage('good-bad-ugly.html', 'contentarea');">The Good, The Bad, and The Ugly : End Gunfight</a></p>
	<div id="contentarea">
	</div>
</div>
</div>
</div>

</div>
</body>
</html>
Below is the code from one of the external pages I am loading:
HTML Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>


</head>

<body>
<object width="480" height="385"><param name="movie" value="http://www.youtube.com/v/sXldafIl5DQ&hl=en&fs=1&rel=0&color1=0x2b405b&color2=0x6b8ab6&border=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/sXldafIl5DQ&hl=en&fs=1&rel=0&color1=0x2b405b&color2=0x6b8ab6&border=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="385"></embed></object>
</body>
</html>
Thank you