Ultimate Fade-in slideshow - 2 that pause on page

[Terts]

1) Script Title: Ultimate Fade-in slideshow

2) Script URL (on DD): http://dynamicdrive.com/dynamicindex14/fadeinslideshow.htm

3) Describe problem: I copied the code exactly from the page, and am trying to have two slideshows on the page, with both of them allowing the pause. If I have them both in the same script tag, it will allow both to pause. But, if I try to put them in two different script tags (so that I can do the alignment I need), only the second one pauses. Any idea why this is? is there a fix I can do to the main script code?

Here is the HTML:

<div id="rug-left"><script type="text/javascript">
//new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause (0=no, 1=yes), optionalRandomOrder)
new fadeshow(fadeimages, 250, 350, 0, 3000, 1)
</script></div>

<div id="rug-right"><script type="text/javascript">
//new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause (0=no, 1=yes), optionalRandomOrder)
new fadeshow(fadeimages2, 250, 350, 0, 3000, 1)
</script></div>


and here is the CSS:

#rug-left {
float: left;
margin: 0 40px 0 38px;
padding: 0;
}
#rug-right {
position: relative;
margin: 0;
padding: 0;
}


Thanks for any help!

[jscheuer1]

I tried this out in 3 browsers. Only FF had the problem that you describe. To fix it in that browser, you probably have several choices. I'll give you two:


#rug-left {
float: left;
margin: 0 40px 0 38px;
padding: 0;
}
#rug-right {
margin: 0;
padding: 0;
}

That's the simplest. There's no reason to have position relative on rug-right, as you give it no coordinates (left, top, bottom, or right). By giving it relative position in FF you stack it over rug-left.

But, if there is something you are not telling us, and you need to have it positioned relative, you can do the same to rug-left, and stack it higher:


#rug-left {
position: relative;
z-index: 10;
float: left;
margin: 0 40px 0 38px;
padding: 0;
}
#rug-right {
position: relative;
margin: 0;
padding: 0;
}

As far as I can tell, neither solution will hurt anything in any browser, and it appears to be a Mozilla and/or FF bug, as any division stacked over another that has no background, shouldn't 'cover' it.

[Terts]

Thank you very much! Yes, I found the issue in Firefox and removing the position: relative worked like a charm!