Empty Space Showing In A Frame

[chwebdesigns]

Hi,

 

I have no idea what is causing the problem, so any help or ideas would be greatly appreciated.

 

I am using a 3rd party script to connect the website to a flickr account and pull the images from there. The images then appear in a css defined <div> area with a scrollbar across the bottom. This works fine, however when the page is first loaded there is a load of blank space at the end of the scroll area, however once the page has been refreshed or reloaded this blank space disappears. I don't want the blank space to appear as it looks like the images haven't fully loaded when they have.

 

As I am not sure what is causing the problem I have included the PHP Code, HTML Code and relevant CSS snipets.

 

Any help or ideas are much appreciated!

 

Many thanks,

Cal

 

 

1) PHP Function to get the relevant set from flickr

function getSet($which) {
global $user;
global $apikey;

$method = 'flickr.photosets.getPhotos';
$params['user_id'] = $user;
$photoCollection =& new DOMIT_Document();
   $request_url = 'http://www.flickr.com/services/rest/?';

   if (empty($params)) $params = array();
$params['api_key'] = $apikey;
$params['method'] = $method;
$params['photoset_id'] = $which;
   foreach ($params as $var => $val) {
	 $var = urlencode($var);
	 $val = urlencode($val);
	 $request_url .= "&$var=$val";
   }

$safe_return = getFileContents($request_url);
$response = $photoCollection->parseXML($safe_return);
$photos =& $photoCollection->documentElement->getElementsByTagName("photo");
$total = $photos->getLength();

for ($i=0; $i<$total; $i++) {
   $currImg =& $photos->item($i);
 $id =& $currImg->getAttributeNS($URI, 'id');
 $server =& $currImg->getAttributeNS($URI, 'server');
 $secret =& $currImg->getAttributeNS($URI, 'secret');
 echo "<a href=\"http://static.flickr.com/".$server."/".$id."_".$secret.".jpg\" rel=\"lightbox[flickr]\" title=\"".$id."\" name=\"$user\"><img src=\"http://static.flickr.com/".$server."/".$id."_".$secret.".jpg\"  alt=\"Catherine Laura Photography\" class=\"photo\" /></a>";
}
}

 

2) HTML Code to display photos

 

<div id="photostream">
 <div id="streamcontainer">
 <?php
  $flickr = getSet($theSet);
 ?>
 </div>
</div>

 

3) CSS Code for Containers

#streamcontainer {
white-space: nowrap;
height: 360px;
}
#photostream {
width: 670px;
height: 365px;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
}

 

Thanks again!