jQuery Grid Plugin - jqGrid

1st POST ON THIS FORUM.  HAVING HARD TIME WITH FORMATTING OF MY QUESTION AND CODE.

ALSO ASKED ON STACKOVERFLOW –

http://stackoverflow.com/quest.....s-menu-ie7

I'm having an issue in IE 6 and 7 when using jqGrid (v3.6.4) and the ASP.Net CSS Friendly Adapters for the

ASP.Net menu control. The problem I'm running into is that my menu tiers render beneath my grid no

matter how high I go with the z-index, but only my vertical menu (using .AspNet-Menu-Vertical). When using

a horizontal grid, the subtiers render over the grid. Everything works as advertised in my head using Firefox

or IE8.

My explanation of this one will probably end up with some missing detail (missing css puzzle piece) that was

left out, so please just ask for anything needed to clarify. I'm not sure if maybe the problem is caused by the

mixture of absolute and relative positionings or something else completely. Maybe someone else will see

immediately, it's evading me. And thank you in advance for any help or guidance you can give.

Okay, let me lay out the details. I'm using jqGrid version 3.6.4 with the jQuery UI framework support. I am

also using a custom jQuery UI theme, but no special styling was added or modified other than color changes

and the like.

Layout Code

<div id="ContentAreaBlock">

<asp:Panel ID="PanMainVerticalMenu" runat="server" CssClass="mainVerticalMenuContainer">
    <div class="mainVerticalMenuBlock">
        <asp:menu id="MenuMainVerticalNavigation" runat="server" cssselectorclass="MenuMainNavigation"
Orientation="Vertical"/>
    </div>
</asp:Panel>

<asp:Panel ID="PanContentContainer" runat="server"
CssClass="contentContainer ContentLeftMargin Contentfont">
    <div style='width: 100%'>
        <div id="gridWrapperAssets">
            <table id="gridTableAssets"></table>
            <div id="pagerAssets" style="text-align:center;"></div>
        </div>
    </div>
</asp:Panel>
</div>

I hate not having FireBug in IE! I am using the IE Developer Toolbar, not as nice, but I'll list the current style

for the relevant blocks and follow it with the CSS code for the blocks.

Current Style for Div "ContentAreaBlock"

border: solid 1px #1b1b1b;
display: block;

Current Style for Panel "PanMainVerticalMenu"

position: absolute; 
left: 0; 
top: 0;
display: block;

Current Style for Div with class "mainVerticalMenuBlock"

display: block;
hasLayout: -1;
position: relative;
width: 107px;
zoom: 100%;

Current Style For Vertical Menu tier 1

display: block;
line-height: 1;
margin: 0px;
position: relative;
z-index: 1300;

Current Style for Panel with css classes "contentContainer ContentLeftMargin Contentfont"

display: block;
font-size: 1.1em;
margin: auto 10px auto 75px;
padding: 8px 0px 8px 0px;

Current style for table "gridTableAssets"

background: #f0eee5 url('some image') 50% 50%;
border: solid 1px #d9d6c4;
display: block;
hasLayout: -1;
line-height: 1;
margin: 0px;
position: relative;
unicode-bidi: embed;
width: 870px;
z-index: 0;

CSS code for Menu

.mainVerticalMenuContainer
{
    position: absolute; 
    left: 0; 
    top: 0; 
    margin: 14.5em 0 0 0.5em;
}

.mainVerticalMenuBlock
{
    width: 107px; 
    background-color: #e5ebdf; 
    border: solid 1px #475460;
    padding: 0.3em 0 0.3em 0;
}

ul.AspNet-Menu 
{
    position: relative;
}

ul.AspNet-Menu, ul.AspNet-Menu ul
{
    margin: 0;
    padding: 0;
    display: block;
}

ul.AspNet-Menu li
{
    position: relative;
    list-style: none;
    float: left;
}

ul.AspNet-Menu li a, ul.AspNet-Menu li span
{
    display: block;
    text-decoration: none;
}

ul.AspNet-Menu ul
{
    position: absolute;
    visibility: hidden;    
}

.MenuMainNavigation .AspNet-Menu-Vertical
{
    position:relative;
    z-index: 1300;
}
.MenuMainNavigation .AspNet-Menu-Vertical ul.AspNet-Menu
{
    width: 107px;
}
.MenuMainNavigation .AspNet-Menu-Vertical ul.AspNet-Menu ul
{
    background: #d2e2ca;
    width: 19em;
    top: 0px;
    left: 105px;
    border: solid 2px #253d56;
    z-index: 1400; /*TESTING Made it 1400 from 400 */
}
.MenuMainNavigation .AspNet-Menu-Vertical ul.AspNet-Menu ul ul
{
    width: 19em;
    z-index: 1500;
}
.MenuMainNavigation ul.AspNet-Menu ul li a, .MenuMainNavigation ul.AspNet-Menu ul li span
{
    display: block;
    margin: 0;
    padding: 0;
    text-align: left;
    border: none;
}