[css-d] Z-Index Issues in Table

[Chris Pallé]

Hi Group:

I'm trying to resolve an issue with z-index. I have a UL inside a  
tablecell that I want to hover over and outside of table. The problem  
is, table items from the cells beneath the cell containing the UL  
bleed through the UL when it overlaps.

There is a JS trigger that switches the ul.prodCloseupView display to  
"block." I thought putting a high z-index on the UL would cause it to  
rise above all the other elements, but it didn't help. The h5 on the  
rows beneath bleed through. Am I missing something?

Thanks!

Mark-up (I've taken out a lot for readability):
<table id="itemTable">
<tr class="itemRow">

<td>
<div class="itemContainer">
<h5>Product Name</h5>

<ul id="item2-detail" class="prodCloseupView">
<li><h6>Detail of Shutters Polo Shirt - Ocean - Large</h6></li>
<li><img class="closeUp" src="" /></li>
<li class="closeDetail"><a href="">Close Detail</a></li>
</ul>

</div>
</td>

<td></td>
<td></td>
<td></td>

</tr>

<tr class="itemRow">

<td>
<div class="itemContainer">
<h5>Product Name</h5>

<ul id="item3-detail" class="prodCloseupView">
<li><h6>Detail of Shutters Polo Shirt - Ocean - Medium</h6></li>
<li><img class="closeUp" src="" /></li>
<li class="closeDetail"><a href="">Close Detail</a></li>
</ul>

</div>
</td>

<td></td>
<td></td>
<td></td>

</tr>
</table>


CSS:
#itemTable tr.itemRow ul.prodCloseupView {
        display:none;
}

.prodCloseupView {
        position:absolute;
        top:-200px;
        left:0;
        background-color: white;
        text-align: center;
        border: solid 1px #000000;
        padding: 0 .5em;
        z-index:105;
}

.prodCloseupView .closeDetail {
        position: absolute;
        top:-15px;
        right:-1px;
        font-size: .9em;
        background:white url(../../images/misc/hover-top-tab-right.gif) 100%  
-1px no-repeat;
        border-top: solid 1px #000000;
        z-index:15;
        padding: 0px 6px 3px 0px;
}

.prodCloseupView .closeDetail a {
        display: block;
        background:white url(../../images/misc/hover-top-tab-left.gif) 0  
-12px no-repeat;
        padding-left: 6px;
        padding-top: 3px;
}

.prodCloseupView h6 {
        font-size: 1em;
        margin-top: .8em;
        text-align: left;
}

.prodCloseupView img.closeUp {
        padding: .5em 1em 1em 1em;
}



chris.pallé, interactive media designer
--------------------------------------------------------
[EMAIL PROTECTED]



______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/