z-index of mouse over not working

[hbmehta]

Hi, I have a table with 2 TRs and I want first TR to be overlap of the second TR and z-indez works fine. But when I remove second TR, first TR should overlap the next div, thats not happening. I have pested my code here. Any help? Thanks in advance.

css -

.content {
width: 100%;
height: 650px;
/* works only if parent container is assigned a height value */
overflow: auto;
background-image: url(../images/Main-BackGround-Gradient.jpg);
background-repeat: repeat;
/*display:table;*/
position: relative;
z-index: 1;
}

.menu {
width: 100%;
overflow: hidden;
position:relative;
z-index: 2;
}

.firstLevelMenuRowClass {
height: 35px;
/*width: 100%;*/
background-image: url(../images/Menubar-plus-11pixels.jpg);
background-repeat: repeat;
position: relative;
top: 0px;
left: 0px;
z-index: 10;
}

.borderClass {
width: 2px;
height: 35px;
text-align: center;
/*overflow: hidden;*/
position: absolute;
background-image: url(../images/Menubar-separator-11px.jpg);
border: 0px;
}

.menuBarItems {
width: 132px;
height: 35px;
text-align: center;
/*padding-bottom:9px;
border-left: 1px solid #000033;
border-right: 1px solid #5984a3;*/
overflow: hidden;
position: absolute;
background-image: url(../images/Menubar-plus-11pixels.jpg);
background-repeat: repeat;
border: 0px;
margin: 0px;
padding: 0px;
vertical-align: text-middle;

}

.menuBarItemsColorChange {
width: 134px;
height: 46px;
border: 0px;
text-align: center;
overflow: hidden;
background-image: url('../images/Rollover-standard.png');
background-position: 0px -1px;
padding-top: -1px;
padding-left: -1px;
position: absolute;
padding-left: -1px;
z-index:20;
}

html -

<div dojoType="dijit.layout.ContentPane" class="menu"><div id="firstLevelMenu" style="position:relative;">
<table width="100%" cellspacing="0px" cellpadding="0px" class="menuFonts">
<tr id="firstLevelMenuRow" class="firstLevelMenuRowClass">
<td id="cell0" style="top: 0px; left: 0px;" class="menuBarItemsFirstElement">Agency Sales</td>
</tr>
<!--<tr class="blueUnderMenu">
<td>
</td>
</tr>-->
</table>
</div>
</div>
<div dojoType="dijit.layout.ContentPane" align="center" class="content" id="conentDiv">
</div>

[rocknbil]

Welcome aboard hbmehta,

I want first TR to be overlap of the second TR

I think you might have the wrong approach here. the structure of a table is such that it's rows and cells are locked within the table in a matrix of rows and columns, using absolute positioning to break this behavior will give some odd results. I'm surprised it even works at all. If you want to do overlapping and absolute positioning, use other block elements: <div>,<p>, etc.

But in answer to this,

z-index of mouse over not working

Put CSS borders on all your elements, usually when absolute positioning and z-index is involved, one of the elements is covering up the links, making them inaccessible.

[hbmehta]

Thanks for the quick reply. I unerstand what you are saying.

After I posted my problem I figured out that z-index is not working because of the div height (which is undefined). Eventhough mouseover image size is 46px (div height is set to TR height by default which is 35px), its choping of last 11px. I still dont understand how to resolve this. May be my approach is wrong, but technically speaking the mouseover image should overlap the div. I have pested the code here for reference.

<div dojoType="dijit.layout.ContentPane" class="menu">
<div id="firstLevelMenu" style="position:relative;z-index:3;">
<table width="100%" cellspacing="0px" cellpadding="0px" class="menuFonts">
<tr id="firstLevelMenuRow" class="firstLevelMenuRowClass">
<td id="cell1" style="top: 0px; left: 136px;" class="menuBarItems">Company Sales</td>
</tr>
</table>
</div>
</div>

onMouseOver of the TD I am changing td's class to - menuBarItemsColorChange

All css -
.menu {
width: 100%;
overflow: hidden;
position:relative;
z-index: 2;
}

.firstLevelMenuRowClass {
height: 35px;
/*width: 100%;*/
background-image: url(../images/Menubar-plus-11pixels.jpg);
background-repeat: repeat;
position: relative;
top: 0px;
left: 0px;
z-index: 10;
}

.menuBarItems {
width: 132px;
height: 35px;
text-align: center;
/*padding-bottom:9px;
border-left: 1px solid #000033;
border-right: 1px solid #5984a3;*/
overflow: hidden;
position: absolute;
background-image: url(../images/Menubar-plus-11pixels.jpg);
background-repeat: repeat;
border: 0px;
margin: 0px;
padding: 0px;
vertical-align: text-middle;

}

.menuBarItemsColorChange {
width: 134px;
height: 45px;
border: 0px;
text-align: center;
overflow: hidden;
background-image: url('../images/Rollover-134x46.png');
background-position: 0px -1px;
padding-top: -1px;
padding-left: -1px;
position: absolute;
z-index: 20;
}

Currently before mouseover TD background image height, TR and so as div height is 35px. but when I mouse over on TD I am setting another backgrund-image for TD which is having height 46px but because of the div's height its chopping of last 11px.

When I have two TRs of height 35px each, div height automatically set to 70px so mouse over works perfectly because mouseover image height is 46px < 70px.

My understanding is - as TD's z-index is higher than TR's and div's z-index it should show whole background-image of 46px.

Any help on this?

Thanks again for the quick reply.

[hbmehta]

Thanks a lot for the information you gave. I got my problem resolved.

You said - I think you might have the wrong approach here. the structure of a table is such that it's rows and cells are locked within the table in a matrix of rows and columns.

I removed all outer divs and just put the table there. Its working as expected now.

Thanks again.