Empty Space On Horizontal Scroll

[chwebdesigns]

Hi,

 

I have no idea why this problem is happening, so was wondering if anyone could help?

 

I have a PHP script pulling images from a flickr account and displaying them on my website. The images are set so that they appear in a horizontal scroll box which fills the width of the page content.

 

However, when the page is first loaded, there is a load of blank space at the end of the scroll box, making the scroll box continue, on the page refresh/reload this blank space disappears and the total width of the scroll box is just that so all of the images fit in.

 

I hope this makes sense? Any ideas?

 

The relevant parts of the CSS coding are as follows:

 

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

 

I have also included below the relevant HTML and PHP Coding incase this helps at all?

 

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

 

<?php
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>";}}
?>

 

Any help or ideas are much appreciated - as I am absolutley stumped on thoughts now!

 

Many thanks in advance,

Cal

[Adam]

No, doesn't make a great deal of sense to be honest. Can you provide a link to the website, or some code we can use to reproduce the issue? We can't use what you've provided.

[chwebdesigns]

Hi,

 

Thanks for the reply.

 

The website is online at www.catherinelaura.com/pages/portfolio from there, there are 3 seperate galleries each gallery has the same coding and each has the same problem (they are the same page, just witha different ?id=xx value)

 

Thanks,

Cal

[Adam]

Hmm.. I'm can't spot anything with horizontal scroll, or anything that looks out of place? What browser are you using?

[chwebdesigns]

How strange,

 

This problem is happening in IE9 but after double checking in firefox, I've realised that the opposite occurs in Firefox, as it is stopping the horizontal scroll before all of the pictures are there.

 

Thanks,

Cal

[Adam]

Ahh. Doesn't work at all in Chrome, the scroll bar isn't even displayed. I would concentrate on fixing the functional issues before aesthetic.

[chwebdesigns]

Hmm thanks for that info - need to start checking compatibility in chrome I think!

 

Will have to look into all of the coding then and decide where the problem lies, whether it's in CSS / HTML / PHP or a mixture of all 3!

 

Thanks for the help

 

Cal