IE6 z-index issue

Relatively positioned elements

[Nikhil]

Hi, I am having a hard time fixing this z-index issue for IE6. Here is what's bothering me (http://i51.tinypic.com/1zbqutj.png):

I have vertically placed <p> tags (all relatively positioned) to show my site's categories.

On mouseover on <p> tag, an arrow is displayed which onclick opens a sub-categories container (absolutely positioned, and z-index:1) right below this <p> tag and as designed, it is positioned over the other <p> tags below the current one.

Now the problem is that in IE6 the container seems to have a lower z-index value than the <p> tags under it, as a result, the text in the container are overlapping with the text in the relatively positioned <p> tags.

It is working fine in other browsers.

---------------------------------------------------
CSS
---------------------------------------------------
.sub{border-bottom:1px dashed #d4d4d4;margin:0;padding:4px 0 5px 0;position:relative;}
.drd{display:block;cursor:pointer;background:url(../gifs/sp1.png) no-repeat -359px -574px;height:19px;width:21px;position:absolute;right:5px;}
.drd:hover{box-shadow:0 0 2px #888;-moz-box-shadow:0 0 2px #888;-webkit-box-shadow:0 0 2px #888;-moz-border-radius:3px;border-radius:3px;}
.r{text-align:right;}
.drdopen{position:absolute;top:2px;right:-5px;z-index:1;}
.drdclose{position:absolute;right:8px;top:6px;display:block;height:20px;width:21px;cursor:pointer;}
.drdclose:hover{background:#f9f9f9;opacity:0.3;-moz-border-radius:4px;border-radius:4px;}
.drdtop{background:url(../gifs/sp1.png) no-repeat 0 -556px;height:28px;width:298px;display:block;}
.drdmid{background:url(../gifs/sp2.png) no-repeat -15px -150px;width:298px;display:block;z-index:1000;}
.drdmid a{border-bottom:1px dashed #d4d4d4;padding:4px 0 5px 0;display:block;color:#993399;margin:0 15px;font-size:13px;}
.drdmid a:hover{background-color:#ebebeb;}
.drdbot{background:url(../gifs/sp1.png) no-repeat 0 -584px;height:10px;overflow:hidden;width:298px;display:block;}

---------------------------------------------------
HTML
---------------------------------------------------
<p class="sub"><span class="drd dis0"></span><span class="drdopen dis0"><b class="drdclose" title="Close"></b><span class="drdtop"></span><span class="drdmid">
<a href="#">Antiques</a>
<a href="#">Art Classes</a>
<a href="#">Art Stationery &amp; Accessories</a>
<a href="#">Galleries &amp; Exhibitions</a>
<a href="#" class="r">more &raquo;</a>
</span><span class="drdbot"></span></span>
<a href="#">Art &amp; Antiques</a></p>

<p class="sub"><span class="drd dis0"></span><span class="drdopen dis0"><b class="drdclose" title="Close"></b><span class="drdtop"></span><span class="drdmid">
<a href="#">Audi A6</a>
<a href="#">Chevrolet Optra</a>
<a href="#">Daewoo Matiz</a>
<a href="#">Maruti Suzuki Esteem</a>
<a href="#" class="r">more &raquo;</a>
</span><span class="drdbot"></span></span>
<a href="#">Automotive &amp; Vehicles</a></p>

<p class="sub"><span class="drd dis0"></span><span class="drdopen dis0"><b class="drdclose" title="Close"></b><span class="drdtop"></span><span class="drdmid">
<a href="#">Academic Books</a>
<a href="#">Book Publishers</a>
<a href="#">Book Shops</a>
<a href="#">Novels &amp; General Books</a>
<a href="#" class="r">more &raquo;</a>
</span><span class="drdbot"></span></span>
<a href="#">Books &amp; Publications</a></p>

<p class="sub"><span class="drd dis0"></span><span class="drdopen dis0"><b class="drdclose" title="Close"></b><span class="drdtop"></span><span class="drdmid">
<a href="#">Boutiques</a>
<a href="#">Fashion Accessories</a>
<a href="#">Footwear</a>
<a href="#">Garments &amp; Clothing</a>
<a href="#" class="r">more &raquo;</a>
</span><span class="drdbot"></span></span>
<a href="#">Clothing &amp; Accessories </a></p>

<p class="sub"><span class="drd dis0"></span><span class="drdopen dis0"><b class="drdclose" title="Close"></b><span class="drdtop"></span><span class="drdmid">
<a href="#">Admissions</a>
<a href="#">Career Counseling</a>
<a href="#">Career Events &amp; Seminars</a>
<a href="#">Coaching Institutes</a>
<a href="#" class="r">more &raquo;</a>
</span><span class="drdbot"></span></span>
<a href="#">Education &amp; Learning </a></p>

<p class="sub"><span class="drd dis0"></span><span class="drdopen dis0"><b class="drdclose" title="Close"></b><span class="drdtop"></span><span class="drdmid">
<a href="#">Accessories</a>
<a href="#">Cameras - Still, Digital</a>
<a href="#">Cassettes, CDs &amp; DVDs</a>
<a href="#">Computers</a>
<a href="#" class="r">more &raquo;</a>
</span><span class="drdbot"></span></span>
<a href="#">Electronics, Appliances </a></p>

<p class="sub"><span class="drd dis0"></span><span class="drdopen dis0"><b class="drdclose" title="Close"></b><span class="drdtop"></span><span class="drdmid">
<a href="#">Bakeries &amp; Confectionery</a>
<a href="#">Cafe, Fast Food Joints</a>
<a href="#">Caterers</a>
<a href="#">Coffee Shops</a>
<a href="#" class="r">more &raquo;</a>
</span><span class="drdbot"></span></span>
<a href="#">Food, Dining &amp; Parties</a></p>

<p class="sub"><span class="drd dis0"></span><span class="drdopen dis0"><b class="drdclose" title="Close"></b><span class="drdtop"></span><span class="drdmid">
<a href="#">Hardware Supplies</a>
<a href="#">Home Decoratives</a>
<a href="#">Home Furnishings</a>
<a href="#">Home Furniture</a>
<a href="#" class="r">more &raquo;</a>
</span><span class="drdbot"></span></span>
<a href="#">Furniture, Furnishing &amp; Hardware</a></p>

<p class="sub"><span class="drd dis0"></span><span class="drdopen dis0"><b class="drdclose" title="Close"></b><span class="drdtop"></span><span class="drdmid">
<a href="#">Alternative Treatments</a>
<a href="#">Chemists</a>
<a href="#">Cosmetics, Toiletries</a>
<a href="#">Eye Care Products</a>
<a href="#" class="r">more &raquo;</a>
</span><span class="drdbot"></span></span>
<a href="#" class="tabs_nob">Health, Beauty &amp; Fitness</a></p>

[alt131]

Hi Nikhil [webmasterworld.com], and welcome to WebmasterWorld :)

I've looked at your code several times, and from your description it sounds like a known issue with ie stacking, but unfortunately I can't reproduce it here.

In the posted code the sub-links are all visible, and stacked on top of each other, plus laid out horizontally on the far right of the viewport. So I wonder if there is some styling missing. For example, class="dis0" is in the html, but isn't in the provided styling. You may want to double-check you've posted all the relevant styles

Second, as the code is complex, useful to validate [validator.w3.org] the css and html as well. Small errors never help when code is performing badly: Things like
.drdclose {... - moz-border-radius; ...} <-- note the gap between the dash and "moz"

Third, z-index only applies to elements that have been positioned, and position is not inherited. So check you have specified a position for all the elements you want to manipulate. For example, <span class="mid"> - which may be the sub-container you are saying is stacking too low.

Once those things are resolved, it should be easier to trace the stacking issue and the element that is problematic.

[Nikhil]

Thanks alt131,

1. Sorry to have missed the clas dis0 here.. but I am using it on my page to hide the container
dis0{display:none;}

2. .drdclose {... - moz-border-radius; ...} <-- note the gap between the dash and "moz"

I don't see any space between the dash and "moz".

3. I tried putting z-index values to the elements, but that doewn't work either.

I think I should start trying out another way of achieving what I want. Thanks for the help :)

[alt131]

I don't see any space between the dash and "moz".

Zoom the text very large - it's -[space]moz. Better, run the code through the validator which should catch it.

I tried putting z-index values to the elements, but that doewn't work either

Yes, not a case of z-indexing them all - just the ones that need to be manipulated. There's lots of technical detail behind positioning and stacking issues, but in summary, nested absolutes are not as simple as a first reading of the recommendations suggests. Especially when there are siblings involved because containing box and stacking context are different, which means borders/background and text are not painted as you might expect.

Is removing position:relative from the <p> an option? I seem to recall it solved the issue.

I think I should start trying out another way

If so, consider using a list.