HoverMenuExtender panel shows behind other product boxes in ProductsInLines1.ascx

I added an Ajax HoverMenuExtender panel to the Productbox2.ascx file.  I show a panel with a larger image when the user hovers the mouse over the product image.  Works great!  Except when multiple product boxes exist in the ProductsInLines1.ascx page.  The panel shows behind other product boxes in category view.  

For example: I click a category that is associated to ProductsInLines1.ascx.  Multiple products show in list form (not grid).  I hover the mouse over a product image, and the hover panel shows in front of the corresponding product box, but behind other product boxes.  

How do I force the hover panel to show in front of all the product boxes?  Any ideas?  I have tried setting the z-index for the hover panel without success.  Thanks in advance!

Code from ProductBox2.ascx:

<div class="product-item">
    <h2 class="product-title">
        <asp:HyperLink ID="hlProduct" runat="server" />
    </h2>
    <div class="picture">
        <%-- New ajax code for image popup.  --%>
        <ajaxToolkit:HoverMenuExtender ID="hme2" runat="server"
            TargetControlID="hlImageLink"
            PopupControlID="pnlPopup"
            HoverCssClass="popupHover"
            PopupPosition="Right"
            OffsetX="0"
            OffsetY="0"
            PopDelay="50" />
        <asp:HyperLink ID="hlImageLink" runat="server" />
    </div>

<asp:Panel ID="pnlPopup" runat="server" Style="display: none; height: 300px;  
    width: 300px; background-color: White; border-width: 2px; border-color: Black; border-style: solid;
    padding: 20px">
    <div style="text-align: center;">
        <asp:Image ID="panelImage" runat="server" />
    </div>
</asp:Panel>

The z-index should have done the trick, I would have thought. Where did you put it, I don't see it in the code you posted.

Thanks for your quick reply!  I appreciate your help.

Can you show me where I can set the z-index so my "pnlPopup" panel has a greatest z-index value when active on the ProductsInLines1.ascx page?  I want my panel to show in front of the other product boxes when the user selects a category from the main page.

I tried setting the panel style z-index value on my new panel control (see ProductBox2.ascx below) to a high value.  Then, I set the z-index to 1 for the category page (see ProductsInLines1.ascx below).  Any position setting added to the style setting of the category page ProductsInLines1.ascx produces a blank products in lines page. The code below does not force the new popup panel to the front of all other product boxes in the ProductsInLines1.ascx page.

For example, when I select the jewelry (default NOP) category, three jewelry products show up.  When I hover the mouse over the Black & white Diamond Heart, my new popup panel with the enlarged image shows in front of the corresponding product box.  However, the popup panel shows behind the Diamond Pave Earrings product box.  So half my popup panel gets covered by the next product box in line.

I also tried adding z-index settings to the styles.css page, but I am not sure where to set it.  Help!

My z-index settings in bold:

From ProductBox2.ascx

<div class="product-item">
    <h2 class="product-title">
        <asp:HyperLink ID="hlProduct" runat="server" />
    </h2>
    <div class="picture">
        <%-- New ajax code for image popup. --%>
        <ajaxToolkit:HoverMenuExtender ID="hme2" runat="server"
            TargetControlID="hlImageLink"
            PopupControlID="pnlPopup"
            HoverCssClass="popupHover"
            PopupPosition="Right"
            OffsetX="0"
            OffsetY="0"
            PopDelay="50" />
        <asp:HyperLink ID="hlImageLink" runat="server" />
    </div>

<%-- New panel code for image popup. --%>
<asp:Panel ID="pnlPopup" runat="server" Style="display: none; height: 300px; position: absolute; z-index: 50000;  
    width: 300px; background-color: White; border-width: 2px; border-color: Black; border-style: solid;
    padding: 20px">
    <div style="text-align: center;">
        <asp:Image ID="panelImage" runat="server" />
    </div>
</asp:Panel>


From ProductsInLines1.ascx

<div class="category-page" style="z-index:1">    
     <% if (this.SettingManager.GetSettingValueBoolean("Media.CategoryBreadcrumbEnabled"))
       { %>
    <div class="breadcrumb">
        <a href='<%=CommonHelper.GetStoreLocation()%>'>
            <%=GetLocaleResourceString("Breadcrumb.Top")%></a> /
        <asp:Repeater ID="rptrCategoryBreadcrumb" runat="server">
            <ItemTemplate>
                <a href='<%#SEOHelper.GetCategoryUrl(Convert.ToInt32(Eval("CategoryId"))) %>'>
                    <%#Server.HtmlEncode(Eval("LocalizedName").ToString())%></a>
            </ItemTemplate>
            <SeparatorTemplate>
                /
            </SeparatorTemplate>
        </asp:Repeater>
        <br />
    </div>
    <div class="clear">
    </div>


From styles.css

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*

  PRODUCTS IN LINES 1 - TEMPLATE

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

.product-list1
{
  width: 520px;
  margin: 0 auto 0 auto;
}

.product-list1 .item-box
{
  text-align: left;
  clear: both;
  position: relative;
  margin-bottom: 10px;
                z-index: 1;
}

.product-list1 .product-item
{
  width: 520px;
  height: 177px;
  background: url('images/pb_s_bg.gif') no-repeat 0 100%;
  margin-top: 10px;
  position: relative;
}

.product-list1 .product-item .product-title
{
  font-weight: bold;
  font-size: 12px;
  background: url('images/deal_box_hl.gif') no-repeat 0 0;
  padding-left: 10px;
}

.product-list1 .product-item .product-title a
{
  background: url('images/deal_box_hr.gif') no-repeat 100% 0;
  display: block;
  height: 2em;
  line-height: 1.3em;
  overflow: hidden hidden;
  padding: 4px 10px 8px 0px;
}

.product-list1 .product-item .picture
{
  float: left;
  margin: 10px 0 10px 10px;
}

.product-list1 .product-item .description
{
  padding: 0px 0 0 10px;
  margin: 10px 150px 0px 140px;
  text-align: left;
  border-left: solid 1px #e3e3e3;
  color: #555;
}

.product-list1 .product-item .prices-wrapper
{
  float: right;
  text-align: right;
  position: absolute;
  bottom: 20px;
  right: 5px;
}

.product-list1 .product-item .prices
{

}

.product-list1 .product-item .prices .productPrice
{
  color: green;
}

.product-list1 .product-item .prices .oldproductPrice
{
  color: Red;
  text-decoration: line-through;
}

.product-list1 .product-item .buttons
{
  padding-top: 20px;
}

You don't need the z-index to be a super large number, it just needs to be higher than what you want it to be on top of. You can set it to one and then set the stuff it is supposed to be on top of to -1 and it should work fine.

Hi and thanks again for your replies.

I decided to visit this post one more time.  I have tried setting the z-index value many ways, and the popup panel (added to ProductBox2.ascx shown above) still shows behind the other product boxes in ProductsInLines1.ascx (also shown above).  

Does anyone have advice where the z-index should be set, which forces the panel popup (added to ProductBox2.ascx) in front of all other product boxes in ProductsInLines1.ascx?  

I have tried setting the z-index in various locations including ProductBox2.ascx, ProductsInLines1.ascx, and Styles.css.

This is driving me crazy.

Thanks,
4Loop

Did you try setting z-index on the img in css? (I can't see it).

Also, have you tried it in other browsers? (I know this sounds odd, but I used an ASP.NET AJAX accordian menu that didn't render properly in IE. Go figure).

ASP.NET AJAX stuff does some really wierd things sometimes (As do most things like this).

Good luck... :)