Help with CSS rollover menu not displaying over a javascript image

Hi,

I have a site that is using a CSS Rollover menu to display list items. The list works fine until it has to appear over the top of an image slideshow powered by javascript...can anyone help me figure out how to get my css menu to appear OVER the image? I had though I may be able to fix it with z-index but I am not sure if I am using it correctly. I have tried as much as I can think of but cannot figure out if this is even possible?

(I have had to edit urls throughout post to get this posted - hopefully the mods can see I am not spamming!)

See problem: www dot jerusalemstoneuk dot co dot uk/stone-tiles/

HTML code for menu:

	 <div id="tobbg">
    	  <div><?php if (function_exists('suckerfish')) {suckerfish();} ?></div></div>

Code (markup):

HTML Code for javascript image slideshow:

   <div id="main-image"><div id="gallery">
  <div id="imagearea">
    <div id="image">
      <a href="javascript:slideShow.nav(-1)" class="imgnav " id="previmg"></a>
      <a href="javascript:slideShow.nav(1)" class="imgnav " id="nextimg"></a>
    </div>
  </div>
   <div id="thumbwrapper">
    <div id="thumbarea">
      <ul id="thumbs">
        <li value="1"><img src="thumbs/1.gif" width="1" height="1" alt="" /></li>
        <li value="2"><img src="thumbs/1.gif" width="1" height="1" alt="" /></li>
        <li value="3"><img src="thumbs/1.gif" width="1" height="1" alt="" /></li>
      </ul>
    </div>
  </div>
</div>

Code (markup):

CSS For Rollover Menu:

 
#tobbg {
	color: #FFFFFF;
	font-size: 12px;
	background-image: url( www jerusalemstoneuk co dot uk);
	background-repeat: repeat-x;
	background-position: left top;
	text-align: left;
	height: 30px;
	width: 847px;
	clear: left;
	line-height: 20px;
}
#gallery {position:relative; width:375px; height:245px; margin:0px; padding:0px; z-index:1;}
#images {height:225px; background:#eef5f6; margin-bottom:20px}
#image {
	position:absolute;
	width:375px;
	height:245px;
	padding:0px;
	border:0px solid #666;
	background:#FFF url(images/loading.gif) center center no-repeat;
	z-index: 1;
}
#image img {position:absolute; top:0px; left:0px}
#thumbwrapper {margin-top:10px; padding:5px 0; width:682px; height:100px; border:2px solid #666; background:#FFF; display:none;}
#thumbarea {position:relative; overflow:hidden; height:100px; width:682px; }
#thumbs {position:absolute; list-style:none; margin-left:5px; height:100px; width:10000px; border-right:5px solid #FFF}
#thumbs li {float:left; margin-right:5px; cursor:pointer}
.imgnav {position:absolute; height:245px; width:20%; z-index:100; height:245px; width:20%; z-index:100; outline:none; cursor:pointer}
#previmg {left:0; background:url(images/left.gif) left center no-repeat; border-left:1px solid #FFF}
#previmg:hover {opacity:1; filter:alpha(opacity=100)}
#nextimg {right:0; background:url(images/right.gif) right center no-repeat; border-right:1px solid #FFF}
#nextimg:hover {opacity:1; filter:alpha(opacity=100)}

Code (markup):

JavaScript Call in html:

<script type="text/javascript">
var imgid = 'image';
var imgdir = ' www dot jerusalemstoneuk dot co dot uk/stone-tiles/fullsize';
var imgext = '.jpg';
var thumbid = 'thumbs';
var auto = true;
var autodelay = 5;
</script>
<script type="text/javascript" src="www dot jerusalemstoneuk dot co dot uk/stone-tiles/slide.js"></script>

Code (markup):

Actual javascript (apologies for length, I dont know js at all):

var slideShow=function(){
	var bxs,bxe,fxs,fxe,ys,ye,ta,ia,ie,st,ss,ft,fs,xp,yp,ci,t,tar,tarl;
	ta=document.getElementById(thumbid); ia=document.getElementById(imgid);
	t=ta.getElementsByTagName('li'); ie=document.all?true:false;
	st=3; ss=3; ft=10; fs=5; xp,yp=0;
	return{
		init:function(){
			document.onmousemove=this.pos; window.onresize=function(){setTimeout("slideShow.lim()",500)};
			ys=this.toppos(ta); ye=ys+ta.offsetHeight;
			len=t.length;tar=[];
			for(i=0;i<len;i++){
				var id=t[i].value; tar[i]=id;
				t[i].onclick=new Function("slideShow.getimg('"+id+"')");
				if(i==0){this.getimg(id)}
			}
			tarl=tar.length;
		},
		scrl:function(d){
			clearInterval(ta.timer);
			var l=(d==-1)?0:(t[tarl-1].offsetLeft-(ta.parentNode.offsetWidth-t[tarl-1].offsetWidth)+10)
			ta.timer=setInterval(function(){slideShow.mv(d,l)},st);
		},
		mv:function(d,l){
			ta.style.left=ta.style.left||'0px';
			var left=ta.style.left.replace('px','');
			if(d==1){
				if(l-Math.abs(left)<=ss){
					this.cncl(ta.id); ta.style.left='-'+l+'px';
				}else{ta.style.left=left-ss+'px'}
			}else{
				if(Math.abs(left)-l<=ss){
					this.cncl(ta.id); ta.style.left=l+'px';
				}else{ta.style.left=parseInt(left)+ss+'px'}
			}
		},
		cncl:function(){clearTimeout(ta.timer)},
		getimg:function(id){
			if(auto){clearTimeout(ia.timer)}
			if(ci!=null){
				var ts,tsl,x;
				ts=ia.getElementsByTagName('img'); tsl=ts.length;x=0;
				for(x;x<tsl;x++){
					if(ci.id!=id){var o=ts[x]; clearInterval(o.timer); o.timer=setInterval(function(){slideShow.fdout(o)},fs)}
				}
			}
			if(!document.getElementById(id)){
				var i=document.createElement('img');
				ia.appendChild(i);
				i.id=id; i.av=0; i.style.opacity=0;
				i.style.filter='alpha(opacity=0)';
				i.src=imgdir+'/'+id+imgext;
			}else{
				i=document.getElementById(id); clearInterval(i.timer);
			}
			i.timer=setInterval(function(){slideShow.fdin(i)},fs);
		},
		nav:function(d){
			var c=0;
			for(key in tar){if(tar[key]==ci.id){c=key}}
			if(tar[parseInt(c)+d]){
				this.getimg(tar[parseInt(c)+d]);
			}else{
				if(d==1){
					this.getimg(tar[0]);
				}else{this.getimg(tar[tarl-1])}
			}
		},
		auto:function(){ia.timer=setInterval(function(){slideShow.nav(1)},autodelay*1000)},
		fdin:function(i){
			if(i.complete){i.av=i.av+fs; i.style.opacity=i.av/100; i.style.filter='alpha(opacity='+i.av+')'}
			if(i.av>=100){if(auto){this.auto()}; clearInterval(i.timer); ci=i}
		},
		fdout:function(i){
			i.av=i.av-fs; i.style.opacity=i.av/100;
			i.style.filter='alpha(opacity='+i.av+')';
			if(i.av<=0){clearInterval(i.timer); if(i.parentNode){i.parentNode.removeChild(i)}}
		},
		lim:function(){
			var taw,taa,len; taw=ta.parentNode.offsetWidth; taa=taw/4; 
			bxs=slideShow.leftpos(ta); bxe=bxs+taa; fxe=bxs+taw; fxs=fxe-taa;
		},
		pos:function(e){
			xp=ie?event.clientX+document.documentElement.scrollLeft:e.pageX; 
			yp=ie?event.clientY+document.documentElement.scrollTop:e.pageY;
			if(xp>bxs&&xp<bxe&&yp>ys&&yp<ye){
				slideShow.scrl(-1);
			}else if(xp>fxs&&xp<fxe&&yp>ys&&yp<ye){
				slideShow.scrl(1);
			}else{slideShow.cncl()}
		},
		leftpos:function(t){
			var l=0;
			if(t.offsetParent){
				while(1){l+=t.offsetLeft; if(!t.offsetParent){break}; t=t.offsetParent}
			}else if(t.x){l+=t.x}
			return l;
		},
		toppos:function(t){
			var p=0;
			if(t.offsetParent){
				while(1){p+=t.offsetTop; if(!t.offsetParent){break}; t=t.offsetParent}
			}else if(t.y){p+=t.y}
			return p;
		}
	};
}();

window.onload=function(){slideShow.init(); slideShow.lim()};

Code (markup):

Any help would be MUCH appreciated as I can't for the life of me figure this out!!

Thanks,

 

Add a z-index greater than 1 to the unordered list class "children". In your css it should look like:

#suckerfishnav ul {
border-color:#FFFFFF -moz-use-text-color -moz-use-text-color;
border-style:solid none none;
border-width:1px 0 0;
font-weight:normal;
height:auto;
left:-999em;
line-height:1;
margin:0;
position:absolute;
width:150px;
z-index:10;
}

Sorry if there's added stuff in that. I used firefox's firebug to copy and paste that bit. Just note the z-index:10 at the bottom. I chose 10 just in case, but you can replace it with any number greater than 1, since your gallery has a z-index of 1. When I added that, it worked fine for me.

 

Awesome, it worked, thanks Rikun, you have saved me hours and hours of trying to figure that out! I thought I wasn't using z-index correctly but I was, I just wasnt using it on the right element!

+rep

 

Try to use CSS instead to JS, it might help!