Z-index not working in any browser [Archive]

GreenM

11-05-2010, 05:20 PM

Hi,

I have been trying for past few days to figure out z-index. I tried all the solutions I read on the internet but to no avail. I have a drop down menu which is falling behind the javascript slideshow. I tried giving higher z-index for "storelinks"(drop downmenu) than "content-area"(which contains javascript slideshow), I tried parent div "branding-nav" a z-index. Nothing worked Please help me out. Live website is http://vermontwoodsstudios.com.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="title" content="Fine American Made Solid Wood Furniture Handmade & Custom Crafted in Vermont. Cherry, Walnut, Maple and Oak." />
<meta name="keywords" content="fine, handcrafted, built to order, woods, wooden, Vermont, furniture, custom, artisan" />
<meta name="description" content="default description" />
<title>Fine American Made Solid Wood Furniture Handmade & Custom Crafted in Vermont. Cherry, Walnut, Maple and Oak.</title>

<link rel="stylesheet" type="text/css" href="http://vermontwoodsstudios.com/squirrelcart/themes/vws/style_main.css.php?tct=937262001288969179" />
<link rel="stylesheet" type="text/css" href="http://vermontwoodsstudios.com/squirrelcart/modules/quick_total/templates/quick_total.css.php?tct=937262001288969179" />
<script src="http://vermontwoodsstudios.com/squirrelcart/js/storefront.js.php" type="text/javascript"></script>

<script type="text/javascript" src="http://vermontwoodsstudios.com/squirrelcart/lib/unitip/unitip.js.php"></script>
<script type="text/javascript" src="http://vermontwoodsstudios.com/squirrelcart/lib/mootools/mootools.js.php"></script>
<script type="text/javascript" src="http://vermontwoodsstudios.com/squirrelcart/lib/slimbox/slimbox.js.php"></script>
<link href="http://vermontwoodsstudios.com/squirrelcart/lib/slimbox/slimbox.css.php" rel="stylesheet" type="text/css" />


<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-5647145-3");
pageTracker._trackPageview();
} catch(err) {}</script>
<script type="text/javascript">

sfHover = function() {
var sfEls = document.getElementById("navbar").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" hover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" hover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>

<script type="text/javascript">

/***********************************************
* Ultimate Fade-In Slideshow (v1.51): © Dynamic Drive (http://www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/

var fadeimages=new Array()
//SET IMAGE PATHS. Extend or contract array as needed
fadeimages[0]=["squirrelcart/themes/vws/images/ss/slide1.jpg", "http://vermontwoodsstudios.com/categories/vermont-handcrafted-wood-furniture", ""]
fadeimages[1]=["squirrelcart/themes/vws/images/ss/slide2.jpg", "http://vermontwoodsstudios.com/categories/vermont-handcrafted-wood-furniture", ""]
fadeimages[2]=["squirrelcart/themes/vws/images/ss/slide3.jpg", "http://vermontwoodsstudios.com/categories/vermont-handcrafted-wood-furniture", ""]
fadeimages[3]=["squirrelcart/themes/vws/images/ss/slide4.jpg", "http://vermontwoodsstudios.com/categories/vermont-handcrafted-wood-furniture", ""]

var fadebgcolor="white"

////NO need to edit beyond here/////////////

var fadearray=new Array() //array to cache fadeshow instances
var fadeclear=new Array() //array to cache corresponding clearinterval pointers

var dom=(document.getElementById) //modern dom browsers
var iebrowser=document.all

function fadeshow(theimages, fadewidth, fadeheight, borderwidth, delay, pause, displayorder){
this.pausecheck=pause
this.mouseovercheck=0
this.delay=delay
this.degree=10 //initial opacity degree (10%)
this.curimageindex=0
this.nextimageindex=1
fadearray[fadearray.length]=this
this.slideshowid=fadearray.length-1
this.canvasbase="canvas"+this.slideshowid
this.curcanvas=this.canvasbase+"_0"
if (typeof displayorder!="undefined")
theimages.sort(function() {return 0.5 - Math.random();}) //thanks to Mike (aka Mwinter) :)
this.theimages=theimages
this.imageborder=parseInt(borderwidth)
this.postimages=new Array() //preload images
for (p=0;p<theimages.length;p++){
this.postimages[p]=new Image()
this.postimages[p].src=theimages[p][0]
}

var fadewidth=fadewidth+this.imageborder*2
var fadeheight=fadeheight+this.imageborder*2

if (iebrowser&&dom||dom) //if IE5+ or modern browsers (ie: Firefox)
document.write('<div id="master'+this.slideshowid+'" style="position:relative;width:'+fadewidth+'px;height:'+fadeheight+'px;overflow:hidden;"><div id="'+this.canvasbase+'_0" style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;filter:progid:DXImageTr ansform.Microsoft.alpha(opacity=10);opacity:0.1;-moz-opacity:0.1;-khtml-opacity:0.1;background-color:'+fadebgcolor+'"></div><div id="'+this.canvasbase+'_1" style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;filter:progid:DXImageTr ansform.Microsoft.alpha(opacity=10);opacity:0.1;-moz-opacity:0.1;-khtml-opacity:0.1;background-color:'+fadebgcolor+'"></div></div>')
else
document.write('<div><img name="defaultslide'+this.slideshowid+'" src="'+this.postimages[0].src+'"></div>')

if (iebrowser&&dom||dom) //if IE5+ or modern browsers such as Firefox
this.startit()
else{
this.curimageindex++
setInterval("fadearray["+this.slideshowid+"].rotateimage()", this.delay)
}
}

function fadepic(obj){
if (obj.degree<100){
obj.degree+=10
if (obj.tempobj.filters&&obj.tempobj.filters[0]){
if (typeof obj.tempobj.filters[0].opacity=="number") //if IE6+
obj.tempobj.filters[0].opacity=obj.degree
else //else if IE5.5-
obj.tempobj.style.filter="alpha(opacity="+obj.degree+")"
}
else if (obj.tempobj.style.MozOpacity)
obj.tempobj.style.MozOpacity=obj.degree/101
else if (obj.tempobj.style.KhtmlOpacity)
obj.tempobj.style.KhtmlOpacity=obj.degree/100
else if (obj.tempobj.style.opacity&&!obj.tempobj.filters)
obj.tempobj.style.opacity=obj.degree/101
}
else{
clearInterval(fadeclear[obj.slideshowid])
obj.nextcanvas=(obj.curcanvas==obj.canvasbase+"_0")? obj.canvasbase+"_0" : obj.canvasbase+"_1"
obj.tempobj=iebrowser? iebrowser[obj.nextcanvas] : document.getElementById(obj.nextcanvas)
obj.populateslide(obj.tempobj, obj.nextimageindex)
obj.nextimageindex=(obj.nextimageindex<obj.postimages.length-1)? obj.nextimageindex+1 : 0
setTimeout("fadearray["+obj.slideshowid+"].rotateimage()", obj.delay)
}
}

fadeshow.prototype.populateslide=function(picobj, picindex){
var slideHTML=""
if (this.theimages[picindex][1]!="") //if associated link exists for image
slideHTML='<a href="'+this.theimages[picindex][1]+'" target="'+this.theimages[picindex][2]+'">'
slideHTML+='<img src="'+this.postimages[picindex].src+'" border="'+this.imageborder+'px">'
if (this.theimages[picindex][1]!="") //if associated link exists for image
slideHTML+='</a>'
picobj.innerHTML=slideHTML
}

fadeshow.prototype.rotateimage=function(){
if (this.pausecheck==1) //if pause onMouseover enabled, cache object
var cacheobj=this
if (this.mouseovercheck==1)
setTimeout(function(){cacheobj.rotateimage()}, 100)
else if (iebrowser&&dom||dom){
this.resetit()
var crossobj=this.tempobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
crossobj.style.zIndex++
fadeclear[this.slideshowid]=setInterval("fadepic(fadearray["+this.slideshowid+"])",50)
this.curcanvas=(this.curcanvas==this.canvasbase+"_0")? this.canvasbase+"_1" : this.canvasbase+"_0"
}
else{
var ns4imgobj=document.images['defaultslide'+this.slideshowid]
ns4imgobj.src=this.postimages[this.curimageindex].src
}
this.curimageindex=(this.curimageindex<this.postimages.length-1)? this.curimageindex+1 : 0
}

fadeshow.prototype.resetit=function(){
this.degree=10
var crossobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
if (crossobj.filters&&crossobj.filters[0]){
if (typeof crossobj.filters[0].opacity=="number") //if IE6+
crossobj.filters(0).opacity=this.degree
else //else if IE5.5-
crossobj.style.filter="alpha(opacity="+this.degree+")"
}
else if (crossobj.style.MozOpacity)
crossobj.style.MozOpacity=this.degree/101
else if (crossobj.style.KhtmlOpacity)
crossobj.style.KhtmlOpacity=this.degree/100
else if (crossobj.style.opacity&&!crossobj.filters)
crossobj.style.opacity=this.degree/101
}

fadeshow.prototype.startit=function(){
var crossobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
this.populateslide(crossobj, this.curimageindex)
if (this.pausecheck==1){ //IF SLIDESHOW SHOULD PAUSE ONMOUSEOVER
var cacheobj=this
var crossobjcontainer=iebrowser? iebrowser["master"+this.slideshowid] : document.getElementById("master"+this.slideshowid)
crossobjcontainer.onmouseover=function(){cacheobj.mouseovercheck=1}
crossobjcontainer.onmouseout=function(){cacheobj.mouseovercheck=0}
}
this.rotateimage()
}

</script>

</head>
<body onload="scOnLoad()">

<div id="container">
<div id="branding-nav">
<h1 class="image-rep" id="vws-home"><a href="http://vermontwoodsstudios.com"><span></span>Handmade Wood Furniture Custom Crafted in Vermont</a></h1>
<div id="phone">toll free (888) 390-5571</div>
<div id="toplinks">
<ul class="menu">
<li><a id="contactus" href="http://vermontwoodsstudios.com/content/contact-us">Contact Us</a></li>
<li><a id="newsletter" href="http://vermontwoodsstudios.com/content/newsletter">Newsletter</a></li>
<li><a id="account" href="http://vermontwoodsstudios.com/content/my-account">My Account</a></li>
</ul>
</div>

<div id="storelinks">

<ul id="navbar">
<li><a href="http://vermontwoodsstudios.com/categories/bedroom-furniture">Bedroom</a>
<ul>
<li><a href="http://vermontwoodsstudios.com/categories/solid-wood-beds">Beds</a></li>
<li><a href="http://vermontwoodsstudios.com/categories/solid-wood-chests">Chests</a></li>
<li><a href="http://vermontwoodsstudios.com/categories/solid-wood-dressers">Dressers</a></li>
<li><a href="http://vermontwoodsstudios.com/categories/handcrafted-wood-armoires">Armoires</a></li>
<li><a href="http://vermontwoodsstudios.com/categories/wood-night-stands">Night Stands</a></li>
<li><a href="http://vermontwoodsstudios.com/categories/mirrors">Mirrors</a></li>
<li><a href="http://vermontwoodsstudios.com/categories/bedroom-furniture-sets-on-sale">Bed Room Sets on Sale</a></li>
</ul>
</li>

<li><a href="http://vermontwoodsstudios.com/categories/dining-room-furniture">Dining
Room</a>
<ul>
<li><a href="http://vermontwoodsstudios.com/categories/wood-dining-tables">Dining Tables</a></li>
<li><a href="http://vermontwoodsstudios.com/categories/wood-dining-chairs">Dining Chairs</a></li>
<li><a href="http://vermontwoodsstudios.com/categories/solid-wood-buffets">Buffets & Sideboards</a></li>
<li><a href="http://vermontwoodsstudios.com/categories/wood-china-cabinets">China Cabinets & Hutches</a></li>
<li><a href="http://vermontwoodsstudios.com/categories/solid-wood-barstools">Bar Stools</a></li>
<li><a href="http://vermontwoodsstudios.com/categories/wood-kitchen-accessories">Kitchen Accessories</a></li>
<li><a href="http://vermontwoodsstudios.com/categories/dining-furniture-sets-sale">Dining Room Sets on Sale</a></li>
</ul>
</li>

<li><a href="http://vermontwoodsstudios.com/categories/living-room-furniture">Living
Room</a>
<ul>
<li><a href="http://vermontwoodsstudios.com/categories/tv-media-cabinets-armoires">TV Cabinets & Armoires</a></li>
<li><a href="http://vermontwoodsstudios.com/categories/wood-tv-stands-consoles">TV Stands & Consoles</a></li>
<li><a href="http://vermontwoodsstudios.com/categories/wood-coffee-tables">Coffee Tables</a></li>
<li><a href="http://vermontwoodsstudios.com/categories/wood-end-tables">End Tables</a></li>
<li><a href="http://vermontwoodsstudios.com/categories/wood-sofa-tables">Sofa Tables</a></li>
<li><a href="http://vermontwoodsstudios.com/categories/wood-book-cases">Bookcases</a></li>
<li><a href="http://vermontwoodsstudios.com/categories/mirrors">Mirrors</a></li>
<li><a href="http://vermontwoodsstudios.com/categories/accent-tables">Accent Tables</a></li>
<li><a href="http://vermontwoodsstudios.com/categories/living-room-furniture-sets">Living Room Sets on Sale</a></li>
</ul>

</li>
<li><a href="http://vermontwoodsstudios.com/categories/home-office-furniture">Home
Office</a>
<ul>
<li><a href="http://vermontwoodsstudios.com/categories/hardwood-home-office-desks">Desks</a></li>
<li><a href="http://vermontwoodsstudios.com/categories/filing-cabinets">Filing Cabinets</a></li>
<li><a href="http://vermontwoodsstudios.com/categories/wood-book-cases">Bookcases</a></li>
<li><a href="http://vermontwoodsstudios.com/categories/office-furniture-chairs">Office Chairs</a></li>
<li><a href="http://vermontwoodsstudios.com/categories/solid-wood-computer-armoires">Computer Armoires</a></li>

</ul>

</li>
<li><a href="http://vermontwoodsstudios.com/content/bedroom-furniture-sale">
Sale</a>
<ul>
<li><a href="http://vermontwoodsstudios.com/content/bedroom-furniture-sale">Sale</a></li>
<li><a href="http://vermontwoodsstudios.com/categories/clearance-furniture-sale">Clearance Furniture</a></li>
</ul>

</li>
<li><a href="http://vermontwoodsstudios.com/content/about-us">
About Us</a>

<ul>
<li><a href="http://vermontwoodsstudios.com/content/furniture">Our Furniture</a></li>
<li><a href="http://vermontwoodsstudios.com/content/mission">Our Mission</a></li>
<li><a href="http://vermontwoodsstudios.com/content/craftsman">Our Craftsman</a></li>
<li><a href="http://vermontwoodsstudios.com/content/testimonials">Testimonials</a></li>
</ul>

</li>
<li><a href="http://vermontwoodsstudios.typepad.com">
Blog</a>
</li>

</ul>

</div>



<div id="search">

<form action="http://www.google.com/cse" id="cse-search-box">
<div>
<input type="hidden" name="cx" value="005386592970816101624:us0kb8mzkbe" />
<input type="hidden" name="ie" value="UTF-8" />
<input type="text" name="q" size="31" />
<input type="submit" name="sa" value="Search" />
</div>
</form>

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("elements", "1", {packages: "transliteration"});</script>
<script type="text/javascript" src="http://www.google.com/coop/cse/t13n?form=cse-search-box&t13n_langs=en"></script>

<script type="text/javascript" src="http://www.google.com/coop/cse/brand?form=cse-search-box&lang=en&sitesearch=true"></script>

</div>

<h2>Handmade natural hardwood furniture. Handcrafted in Vermont. Custom made to fit your space.</h2>
</div>

<div id="content-area">
<div id="home-slide-show2"> <a id="home-sale" href="http://vermontwoodsstudios.com/content/bedroom-furniture-sale"><span></span>Bedroom Furniture Sale</a>
<a id="home-sale3" href="http://vermontwoodsstudios.com/categories/modern-american-furniture"><span></span>Modern American Furniture </a></div>
<div id="home-slide-show1">
<script type="text/javascript">
//new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause (0=no, 1=yes), optionalRandomOrder)
new fadeshow(fadeimages, 710, 396, 0, 2000, 1)

</script>

</div>
<div id="home-content">
<div class="sc_content sc_welcome_content"> <p>Vermont Woods Studios showcases Vermont’s finest furniture makers. These craftsmen have been creating unique collections of heirloom quality wood furniture for generations. Our Vermont Made Furniture is made using premium solid hardwoods which are sustainably harvested from well managed forests. </p>
<br />
<p>Our most popular furniture style continues to be our traditional <a href="http://vermontwoodsstudios.com/categories/shaker-style-furniture-collections">Shaker Furniture</a> and we have several collections including our <a href="http://vermontwoodsstudios.com/categories/american-shaker-furniture" target="_blank">American Shaker Furniture</a>, <a href="http://vermontwoodsstudios.com/categories/vermont-shaker-furniture" target="_blank">Vermont Shaker Furniture</a>, <a href="http://vermontwoodsstudios.com/categories/classic-shaker-furniture">Classic Shaker Furniture</a>, <a href="http://vermontwoodsstudios.com/categories/new-england-shaker-furniture" target="_blank">New England Shaker Furniture</a> and <a href="http://vermontwoodsstudios.com/categories/roz-renfrew-furniture">Renfrew Shaker Furniture</a>. </p>
<p> </p>
</div>
</div>
<div id="promo-content"><a href="http://vermontwoodsstudios.com/products/custom-cherry-shaker-bookcase-doors"><img src="http://vermontwoodsstudios.com/sc_images/content/slideshow6.jpg" width="255" height="195" /></a></div>
<div id="promo-content1"><a href="http://vermontwoodsstudios.com/content/news-articles"><img src="http://vermontwoodsstudios.com/sc_images/content/homepromo.jpg" width="255" height="195" /></a></div>

</div>
</div>


</body>
</html>