Featured Content Slider Z-Index Problem?

[explosivebeer]

1) Script Title: Featured Content Slider

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

3) Describe problem: I'm building a site that scales the pictures of the featured content slider to 100% width and displays the pagination and picture descriptions in the lower-right corner on top of a corner background graphic, which is itself on top of the dynamically changing picture. The entire site is utilizing fixed-position elements with z-indexes.

The pagination displays on top of the background graphic in both FF and IE7 but unfortunately the picture description is only on top of the background graphic in FF and is briefly visible at times in IE7 but then gets covered up when the graphic loads.

I've tried moving the content descriptions around, changing the z-indexes of both that div and the graphic div but it's always behind that graphic in IE7.

Has anyone else encountered this problem or have an idea of how to fix it? I've been stifled by it for over a week and really need to make some headway! Thanks for any help you can give.

[ddadmin]

Hmm I'll need to see the actual example in order to look into it. Please post a link to the page on your site that contains the problematic script so we can check it out.

[explosivebeer]

Hmm I'll need to see the actual example in order to look into it. Please post a link to the page on your site that contains the problematic script so we can check it out.

Sure - it can be seen at http://craftbrewnation.com/test/

And by the way, I've searched through about a hundred threads on the Featured Content Slider to try to find a workaround. I don't know if there is only one of you or many, but you are very much on top of things ddadmin. Much thanks for your efforts.

[ddadmin]

Looking at your CSS, I find two problems that probably are contributing to your problem in IE7.

1) Firstly, you're using position:fixed in the relevant DIVs to position them- IE7 doesn't support "fixed" actually, and will honor it.

2) Since you can't rely on fixed in IE7, your current HTML structure may need to be modified in order to make it cross browser compatible. Looking at your HTML, I've color coded the relevant parts:

<div id="contentDescriptionBox"></div>
    
    <div id="slider1" class="contentslide clearBoth">
      <div class="opacitylayer">
    
    	<div class="contentdiv">
        	<img src="images/bg/kooltrick-1024x768.jpg" width="100%" alt="" />
            <a href="#" class="contentDescription"><span class="contentDescriptionTitle">Kooltrick</span><br />jklhakjhfda</a>        
        </div>

If I'm not mistaken, the DIV in green contains the background image you wish to overlap the descriptions (in red), yet go underneath the image themselves (in purple). There's a conflict with that, since the image and the description are of the same z-index level. They can both be higher than the green DIV, or lower, but not one and not the other.

There are easier options I can think of to get around the above problem rather than change your HTML structure. You can store the descriptions in JavaScript, and dynamically output to a specific DIV on the page that corresponds to each slide as it is viewed. The trick then would just to be position this DIV in any way possible to the desired location, such as using absolute positioning. If you wish to go this route, I can help you with the JavaScript portion, but please first confirm you've created a DIV and positioned it on your page in the desired manner that works cross browser. That is to say, add an arbitrary DIV on your page with some dummy text that shows up exactly where you want it to. I can then show you how to dynamically populate the DIV with the corresponding text description for each slide.

[explosivebeer]

Sorry for the delay in getting back to this. I had family in town this weekend and unfortunately no time for web design.

I've created an absolutely positioned div that is where I'd like the content to be. There's a white border around it and it currently says "Here's the new box." It's at the same address as before: http://craftbrewnation.com/test/

As for fixed positioning, aside from this issue it's seemed to behave the same in FF and IE7. I know previous IE versions don't support that, or the use of transparent pngs and gifs. I'm going to create a modified version of the site with a different CSS document for pre-IE7 users.

And just to clarify, I would like to have the rotating pictures to be underneath, then the black image with the red border, then the rotating picture descriptions and pagination on top of that.

Anyway, I really do appreciate you helping me with this issue.

[ddadmin]

Not a problem. I see you've added the DIV:

<div id="newBox">Here's the new box.</div>

to contain the desired corresponding description. Based on that setup, first, find the below line inside the .js file, and add to it the line in red:

slidernodes[sliderid][thepage].style.display="block" //show selected DIV
document.getElementById("newBox").innerHTML=description[thepage]

Then on your HTML page within your initilization code, add an array description containing the descriptions you wish to be shown in that order, for example:

<script type="text/javascript">

var description=new Array()
description[0]="This is description for 1"
description[1]="This is description for 2"
description[2]="This is description for 3"
"

//Define: ContentSlider("slider_ID", [autorotate_miliseconds], [custompaginatelinkstext], [customnextlinktext])
ContentSlider("slider1", 5000)
//OR ContentSlider("slider1")
//OR ContentSlider("slider1", 3000)
//OR ContentSlider("slider1", 3000, linktextarray)
//OR ContentSlider("slider1", 3000, linktextarray, "Foward")
//OR ContentSlider("slider1", "", linktextarray)
//OR ContentSlider("slider1", "", "", "Foward")
</script>

That should do it.

[explosivebeer]

Thank you very much for your help. It's all working now. Keep up the great work.