...

View Full Version : Z-index not working in any browser



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.



<!-- Template: store_home.tpl.php -->
<!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 &amp; 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 &amp; 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>
<!--[if lt IE 7]>
<script type="text/javascript" src="http://vermontwoodsstudios.com/squirrelcart/lib/unitpng/unitpngfix.js.php"></script>
<![endif]-->
<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" />
<!--[if IE]>

<link rel="stylesheet" type="text/css" href="http://vermontwoodsstudios.com/squirrelcart/themes/vws/ie.css" media="all" />


<![endif]-->

<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()">
<!-- Template: store_home.tpl.php -->
<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="customer-service-links">
<ul class="menu">
<li> <a id="sc-link-41" class="" href="http://vermontwoodsstudios.com/content/customize-your-furniture">Custom Furniture</a></li>
<li> <a id="sc-link-43" class="" href="http://vermontwoodsstudios.com/content/volume-discounts">Volume Discounts</a></li>
<li> <a id="sc-link-44" class="" href="http://vermontwoodsstudios.com/content/free-shipping">Free Shipping</a></li>
<li> <a id="sc-link-45" class="" href="http://vermontwoodsstudios.com/content/lifetime-guarantee">Lifetime Guarantee</a></li>
<li> <a id="sc-link-46" class="" href="http://vermontwoodsstudios.com/content/customer-service">Customer Service</a></li>
<li> <a id="sc-link-47" class="" href="http://vermontwoodsstudios.com/content/about-us">About Us</a></li>
<li> <a id="sc-link-48" class="" href="http://vermontwoodsstudios.typepad.com/">Eco 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>
<!--insert code for google search -->
<h2>Handmade natural hardwood furniture. Handcrafted in Vermont. Custom made to fit your space.</h2>
</div>
<!--end of branding-nav -->
<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>
<!--<img src="squirrelcart/themes/vws/images/home-ss1.jpg" alt="inspired by nature" />-->
</div>
<div id="home-content">
<div class="sc_content sc_welcome_content"> <p>Vermont Woods Studios showcases Vermont&rsquo;s finest furniture makers. These craftsmen have been creating unique collections of heirloom quality wood furniture for generations.&nbsp;Our Vermont Made Furniture is made using premium solid hardwoods which are sustainably harvested from well managed forests.&nbsp;</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>.&nbsp;</p>
<p>&nbsp;</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>
<!--end of container -->

</body>
</html>

abduraooft
11-05-2010, 05:23 PM
AND HERE IS MY HTML Please post the html source taken from your browsers "view source" option.

PS: Also, use
][/COLOR] tags to wrap your codes while posting here. You may edit your original post too for this.

GreenM
11-05-2010, 05:46 PM
Hi, I have edited my previous post with the view source. Thanks!

teedoff
11-05-2010, 05:49 PM
No, you need to use the code tags at the top of the message window to wrap your code in. The icon that looks like # Highlight all your code and then click the # icon. It really makes trying to read all your code much easier.

Also, if you had a link to your site, that would help too, as we could see whats happening live.

GreenM
11-05-2010, 05:56 PM
Thanks for suggesting the right way of posting code here. I have edited my previous post. The live website is http://vermontwoodsstudios.com.

SB65
11-05-2010, 06:03 PM
Your z-index is fine. I think the problem is here:


#branding-nav {
height:147px;
overflow:hidden;
position:relative;
width:1000px;
z-index:20;
}

Remove the overflow and it's OK.

GreenM
11-05-2010, 06:12 PM
THANK you so much SB65. It worked like a charm.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum