StepCarousel z-index stacking.

[cupofnestor]

1) Script Title: StepCaroulsel

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex4/stepcarousel.htm

3) Describe problem:

I have an Issue with using Z-index to "layer" DIVS. I have a floating background div containing an image with.

position:relative;
z-index:1;

and the default( * ) z-index is 10, all undefined elements seem to be inheriting this property.

My DD StepCarousel CSS differs from the example on the webpage only by adding a z-index property of 20 to the .stepcarousel class. I should also mention that all elements have position defined, either relative or absolute.

[jscheuer1]

What exactly is happening that you don't want?

Could we have a link to the page?

Please post a link to a page on your site that contains the problematic code so we can check it out.

[cupofnestor]

Apologies, the problem is that the script doesn't function when positioned above(in z-index) another element.

http://ecbiz83.inmotionhosting.com/~monadn6/tmp/videowonk.html

[azoomer]

First you need to close this part of the script by adding </script> like this

<script type="text/javascript" src="lib/stepcarousel.js">

/***********************************************
* Step Carousel Viewer script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
***********************************************/

</script>

Make a post when you have done that and we can take another look

[cupofnestor]

Derr. NO excuse for newb mistake.

This one works:
http://monadnock.org/tmp/video_un-wonk.html

But not this one, only difference is the low-z backbox containing the bg image.
http://monadnock.org/tmp/videowonk.html

Thanks,
Ryan

[azoomer]

in step.css line 18

.stepcarousel .panel{
float: left; /*leave this value alone*/
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 0px; /*margin around each panel*/
width: 700px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
}

try to delete the overflow:hidden; and see if that helps.

[cupofnestor]

YEP, that did it. Any Idea why?

[azoomer]

Sorry, no idea why ? just a hunch :)