Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

css dropdown disappears behind javascript slideshow

z-index doesn't seem to fix it

11:07 pm on Jun 6, 2012 (gmt 0)

New User

joined:June 6, 2012
posts: 1
votes: 0

There is a dropdown that appears under the "Our Work" tab, and it is visible on all pages except the home page, and I know this has to do with the javascript slideshow on the home page.

I have been able to overcome this on other sites, but was using different tools to construct the slideshow. In this case, the client requires the slideshow to pull images from a folder, and they want to be able to modify the show by simply adding/removing images from the folder. I satisfied that requirement, but now have no success with the drop down.

I played with the z-index of both the slideshow and the menu, even going so far as to force the slides BEHIND the page's background. Still, the dropdown does not appear on the home page. It's as if no matter what I do, that dropdown is still going to hide behind the slides.

Here is the relevant CSS code:
#navcontainer {
padding: 0px;
width: 780px;
height: 55px;
#slideshow {
/*This rule styles the sub-menu links*/
#p7PMnav ul a, #p7PMnav ul a:visited {
padding: 4px 10px 4px 16px;
background-color: #e6ad4b;
color: #fff;
/*the sub-menu hovers*/
#p7PMnav ul a:hover, #p7PMnav ul a:active, #p7PMnav ul a:focus {
background-color: #d28b11;
color: #FFFFFF;
letter-spacing: 0.01px;
/*the submenu classes */
/*The top property here and in the show class serves to fix a minor bug introduced
by the good folks at Apple in their Safari browser for Panther OS*/
#p7PMnav .p7PMhide {
left: -9000px;
border: 0;
top: 0;
#p7PMnav .p7PMshow {
top: auto;
left: auto;
z-index: 20000 !important;

And here is the getimages.php script referenced in the home page slideshow script:
//PHP SCRIPT: getimages.php
Header("content-type: application/x-javascript");

//This function gets the file names of all images in the current directory
//and ouputs them as a JavaScript array
function returnimages($dirname=".") {
$pattern="(\.jpg$)|(\.png$)|(\.jpeg$)|(\.gif$)"; //valid image extensions
$files = array();
if($handle = opendir($dirname)) {
while(false !== ($file = readdir($handle))){
if(eregi($pattern, $file)){ //if this file is a valid image
//Output it as a JavaScript array element
echo 'galleryarray['.$curimage.']="'.$file .'";';


echo 'var galleryarray=new Array();'; //Define array in JavaScript
returnimages() //Output the array elements containing the image file names

All other relevant code from the home page is below.

<div id="navcontainer" bgcolor="#CC0000"><table width="780" border="0" cellspacing="0" cellpadding="0">
<tr><td><img src="../media/navflrlft.jpg" /></td>
<td><ul id="p7PMnav">
<li><a href="../about.html" id="b1">About Us</a></li>
<li><a href="#" class="p7PMtrg" id="b2">Our Work</a>
<li><a href="../projectmanagement.html">Project Management</a></li>
<li><a href="../consulting.html">Consulting</a></li>
<li><a href="../transportation.html">Facility Maintenance</a></li>
<li><a href="../emergency.html">Emergency Planning</a></li>
<li><a href="../references.html" id="b3">References</a></li>
<li><a href="../contact.html" id="b4">Contact</a></li>
<li><a href="../newhome2.html" id="b5">Home</a></li>
<!--[if lte IE 6]><style>#p7PMnav a{height:1em;}#p7PMnav li{height:1em;}#p7PMnav ul li{float:left;clear:both;width:100%}</style><![endif]-->
<!--[if IE 6]><style>#p7PMnav ul li{clear:none;}</style><![endif]-->
<!--[if IE 7]><style>#p7PMnav a{zoom:100%;}#p7PMnav ul li{float:left;clear:both;width:100%;}</style><![endif]-->
<td><img src="../media/navflrrt.jpg" /></td>

<div id="slides">

<script src="http://www.[examplesite].com/media/slides/getimages.php"></script>

<script type="text/javascript">

var curimg=0
function rotateimages(){
document.getElementById("slideshow").setAttribute("src", "http://www.[examplesite].com/media/slides/"+galleryarray[curimg])
curimg=(curimg<galleryarray.length-1)? curimg+1 : 0

setInterval("rotateimages()", 4000)

<img id="slideshow" src="media/slides/arlington.jpg" />

4:08 pm on June 7, 2012 (gmt 0)

Senior Member

WebmasterWorld Senior Member rocknbil is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Nov 28, 2004
votes: 0

Welcome aboard tbestes, have you played with setting the z-index on #navcontainer only?

You have #navcontainer at 100 with a table nested inside it, and are attempting to get the menus themselves at a higher z-index - the problem is, the position is relative, not absolute, so it doesn't pull them out of the natural flow (e.g., it may not be working.)

First thing I'd do is lose the table used for layout (it's not needed,) and probably set position:relative on whatever container is holding #navcontainer. Setting relative on the parent will allow you to use position:absolute on #navcontainer, and it will now be positioned absolutely relative to it's parent (sounds contradictory, but it's not.) You can then set z-index to 1000 on #navcontainer which will bring the entire container up in the z-index.
4:39 pm on June 7, 2012 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts: 4966
votes: 10

You could try the max z-index value of 2147483647.