1 reply [Last post]
hbmehta
hbmehta's picture
Offline
newbie
Last seen: 10 years 51 weeks ago
Timezone: GMT-5
Joined: 2010-01-28
Posts: 7
Points: 9

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 -

Agency Sales

-->

AttachmentSize
zindex.JPG14.28 KB
hbmehta
hbmehta's picture
Offline
newbie
Last seen: 10 years 51 weeks ago
Timezone: GMT-5
Joined: 2010-01-28
Posts: 7
Points: 9

hbmehta wrote: Hi, I have a

hbmehta wrote:

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.C<code><code><code><code>
ontentPane" align="center" class="content" id="conentDiv">