CSS issue: jqGrid and ASP.Net CSS Friendly Adapters Menu - IE7

Question

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;
}

Answer 1

Try adding zoom to every element that has position:relative

zoom: 1;

It looks like some elements have zoom, but not everything that needs it. To me, this sounds like the classic hasLayout Bug in IE.

Answer 2

Can you reorder PanMainVerticalMenu and PanContentContainer so that the container is first? I have previously had issues with IE7 where it ignores z-index and just uses the order of the elements.

As your PanMainVerticalMenu is position:absolute the styling should be the same...

<div id="ContentAreaBlock">
<asp:Panel ID="PanContentContainer" runat="server" CssClass="contentContainerContentLeftMargin Contentfont">...</asp:Panel>

<asp:Panel ID="PanMainVerticalMenu" runat="server" CssClass="mainVerticalMenuContainer">...</asp:Panel>
</div>

ContentAreaBlock may need position:relative oh and have you tried firebug lite?