CMotion cross-browser-issues

[zha_01]

1) Script Title: CMotion Image Gallery not working in Google Chrome, Safari, Opera

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

3) Describe problem: I tried to modify css to creating a multiple rows. But sliding image can only working in Firefox. In IE 7 show message error: 'cross_scroll.style' is null or not an object. Here's the link : http://www.corindo.com/imagescroller

Anything wrong with my code? Thanks for your help in advance!

[jscheuer1]

Works here in IE, Chrome, and Firefox. I did notice that the server was balky though. That could account for occasional intermittent problems in any browser.

One thing I noticed was the markup:

<li><a href="#"><img src="images/banner1.jpg"></a><li> 
<li><a href="#"><img src="images/banner1.jpg"></a><li> 
<li><a href="#"><img src="images/banner1.jpg"></a><li> 
<li><a href="#"><img src="images/banner1.jpg"></a><li> 
<li><a href="#"><img src="images/banner1.jpg"></a><li> 
<li><a href="#"><img src="images/banner1.jpg"></a><li> 
<li><a href="#"><img src="images/banner1.jpg"></a><li> 
<li><a href="#"><img src="images/banner1.jpg"></a><li> 
<li><a href="#"><img src="images/banner1.jpg"></a><li> 
<li><a href="#"><img src="images/banner1.jpg"></a><li> 
<li><a href="#"><img src="images/banner1.jpg"></a><li> 
<li><a href="#"><img src="images/banner1.jpg"></a><li> 
<li><a href="#"><img src="images/banner1.jpg"></a><li> 
<li><a href="#"><img src="images/banner1.jpg"></a><li> 
<li><a href="#"><img src="images/banner1.jpg"></a><li> 
<li><a href="#"><img src="images/banner1.jpg"></a><li> 
<li><a href="#"><img src="images/banner1.jpg"></a><li> 
<li><a href="#"><img src="images/banner1.jpg"></a><li> 
<li><a href="#"><img src="images/banner1.jpg"></a><li> 
<li><a href="#"><img src="images/banner1.jpg"></a><li> 
<li><a href="#"><img src="images/banner1.jpg"></a><li> 
<li><a href="#"><img src="images/banner1.jpg"></a><li> 
<li><a href="#"><img src="images/banner1.jpg"></a><li> 
<li><a href="#"><img src="images/banner1.jpg"></a><li> 
<li><a href="#"><img src="images/banner1.jpg"></a><li> 
<li><a href="#"><img src="images/banner1.jpg"></a><li> 
<li><a href="#"><img src="images/banner1.jpg"></a><li> 
<li><a href="#"><img src="images/banner1.jpg"></a><li> 
<li><a href="#"><img src="images/banner1.jpg"></a><li> 
<li><a href="#"><img src="images/banner1.jpg"></a><li>

Notice at the end of each line there's a new li tag where one would expect to see a closing li tag. Browsers will generally error correct for that, but it could be introducing additional elements.

For example, Firefox sees it as (from its developer tools add on 'view generated source'):

<li><a href="#"><img src="images/banner1.jpg"></a></li><li> 
</li><li><a href="#"><img src="images/banner1.jpg"></a></li><li> 
</li><li><a href="#"><img src="images/banner1.jpg"></a></li><li> 
</li><li><a href="#"><img src="images/banner1.jpg"></a></li><li> 
</li><li><a href="#"><img src="images/banner1.jpg"></a></li><li> 
</li><li><a href="#"><img src="images/banner1.jpg"></a></li><li> 
</li><li><a href="#"><img src="images/banner1.jpg"></a></li><li> 
</li><li><a href="#"><img src="images/banner1.jpg"></a></li><li> 
</li><li><a href="#"><img src="images/banner1.jpg"></a></li><li> 
</li><li><a href="#"><img src="images/banner1.jpg"></a></li><li> 
</li><li><a href="#"><img src="images/banner1.jpg"></a></li><li> 
</li><li><a href="#"><img src="images/banner1.jpg"></a></li><li> 
</li><li><a href="#"><img src="images/banner1.jpg"></a></li><li> 
</li><li><a href="#"><img src="images/banner1.jpg"></a></li><li> 
</li><li><a href="#"><img src="images/banner1.jpg"></a></li><li> 
</li><li><a href="#"><img src="images/banner1.jpg"></a></li><li> 
</li><li><a href="#"><img src="images/banner1.jpg"></a></li><li> 
</li><li><a href="#"><img src="images/banner1.jpg"></a></li><li> 
</li><li><a href="#"><img src="images/banner1.jpg"></a></li><li> 
</li><li><a href="#"><img src="images/banner1.jpg"></a></li><li> 
</li><li><a href="#"><img src="images/banner1.jpg"></a></li><li> 
</li><li><a href="#"><img src="images/banner1.jpg"></a></li><li> 
</li><li><a href="#"><img src="images/banner1.jpg"></a></li><li> 
</li><li><a href="#"><img src="images/banner1.jpg"></a></li><li> 
</li><li><a href="#"><img src="images/banner1.jpg"></a></li><li> 
</li><li><a href="#"><img src="images/banner1.jpg"></a></li><li> 
</li><li><a href="#"><img src="images/banner1.jpg"></a></li><li> 
</li><li><a href="#"><img src="images/banner1.jpg"></a></li><li> 
</li><li><a href="#"><img src="images/banner1.jpg"></a></li><li> 
</li><li><a href="#"><img src="images/banner1.jpg"></a></li><li> 
</li>

It might mess things up, but I would want to at least try changing all of those at the end of each line to closing tags:

<li><a href="#"><img src="images/banner1.jpg"></a></li>
<li><a href="#"><img src="images/banner1.jpg"></a></li>
<li><a href="#"><img src="images/banner1.jpg"></a></li>
<li><a href="#"><img src="images/banner1.jpg"></a></li>
<li><a href="#"><img src="images/banner1.jpg"></a></li>
<li><a href="#"><img src="images/banner1.jpg"></a></li>
<li><a href="#"><img src="images/banner1.jpg"></a></li>
<li><a href="#"><img src="images/banner1.jpg"></a></li>
<li><a href="#"><img src="images/banner1.jpg"></a></li>
<li><a href="#"><img src="images/banner1.jpg"></a></li>
<li><a href="#"><img src="images/banner1.jpg"></a></li>
<li><a href="#"><img src="images/banner1.jpg"></a></li>
<li><a href="#"><img src="images/banner1.jpg"></a></li>
<li><a href="#"><img src="images/banner1.jpg"></a></li>
<li><a href="#"><img src="images/banner1.jpg"></a></li>
<li><a href="#"><img src="images/banner1.jpg"></a></li>
<li><a href="#"><img src="images/banner1.jpg"></a></li>
<li><a href="#"><img src="images/banner1.jpg"></a></li>
<li><a href="#"><img src="images/banner1.jpg"></a></li>
<li><a href="#"><img src="images/banner1.jpg"></a></li>
<li><a href="#"><img src="images/banner1.jpg"></a></li>
<li><a href="#"><img src="images/banner1.jpg"></a></li>
<li><a href="#"><img src="images/banner1.jpg"></a></li>
<li><a href="#"><img src="images/banner1.jpg"></a></li>
<li><a href="#"><img src="images/banner1.jpg"></a></li>
<li><a href="#"><img src="images/banner1.jpg"></a></li>
<li><a href="#"><img src="images/banner1.jpg"></a></li>
<li><a href="#"><img src="images/banner1.jpg"></a></li>
<li><a href="#"><img src="images/banner1.jpg"></a></li>
<li><a href="#"><img src="images/banner1.jpg"></a></li>

[zha_01]

I've try to change the code, but it still can't run in chrome and Safari browser.

[jscheuer1]

That change was good. But I think I was mistaken before about it working in Chrome. I guess I had too many browser windows open at once.

Anyways it appears that Chrome and Safari both see the nobr element as having 0 dimension. It's this nobr element that determines a critical dimension in the initialization of the gallery. You can fix that by adding this rule to the stylesheet:

#trueContainer {
	display: block;
}

[zha_01]

Well done. Thank you very much John, Your solution worked for me.