Multiple Menus - Overlay Problem : The Official Microsoft ASP.NET Forums

Reply

sunscar9536

Member

2 Points

14 Posts

Multiple Menus - Overlay Problem

Jan 04, 2007 05:14 PM|LINK

I apologize if this has already been addressed (and solved).

I've read through most of the posts concerning overlay and z-index problems and still can not find a solution to this problem. I have two menus (side by side) and when the second tier is displayed, it goes under the second menu beside it. I'm including a screenshot that shows what's happening.

What I've tried so far: Changing the Z index on nearly every CSS property for the menu, Adding lower and higher z-index values to the DIV container for the menus and the <asp: menu> tag itself...

Any information or help will be appreciated

Menu Overlay Problem

Reply

sunscar9536

Member

2 Points

14 Posts

Re: Multiple Menus - Overlay Problem

Jan 05, 2007 02:45 PM|LINK

Hmmm.... I'm starting to wonder if there is a solution to this problem. I've continued to try different methods with no luck.

Anyone have any idea?

Reply

Russ Helfand

Contributor

3304 Points

744 Posts

Re: Multiple Menus - Overlay Problem

Jan 05, 2007 08:03 PM|LINK

Is there any way you could boil down your case to something that you could post here on this thread? I want to help and I'm pretty sure this is solvable by adjusting the z-indices but coaching you through that without being able to refer to specific tags and CSS rules is going to be hard. If you can't post the markup and CSS to a postable form then try to sketch out a basic DOM that represents the various container tags, menus, etc.

If you want, give this a quick try. Isolate your two main containers, the boxes on the left and right. Put a z-index on both. Make the one on the left higher than the right but make sure they BOTH have z-indices explicitly set. Be careful to impact <div> tags that are siblings. This is absolutely critical. When you find the <div> for the box on the left then find the <div> for the rightmost box but make certain (absolutely certain) that these are siblings in the DOM. Only then can you set the z-index on both such that they impact each other properly in IE.

Russ Helfand
Groovybits.com

Reply

sunscar9536

Member

2 Points

14 Posts

Re: Multiple Menus - Overlay Problem

Jan 06, 2007 05:02 AM|LINK

Russ,

Thanks for replying... I was about to loose all hope. I've created a quick test page using the same CSS for the menus (which is a modified version of the PrettyMenu that comes with the adapters...) The test page I created contains only <divs> and I've explicitly set a "z-index" value for each. This still doesn't seem to work..I also tried wrapping the 2 divs with 1 div, but got the same result. I'll post the code for each below. Is it by design the second tier is below the top tier? Even having only one menu, you have to bump the "left" value up so that it doesn't go under the top tier. I can post a SS of this if it would make that question a little more clear...

Code from new test page:

<form id="form1" runat="server">
    <div style="float:left; clear:right; z-index: 500">
    <asp:menu id="Menu1" runat="server" DataSourceID="xmlMenu" cssselectorclass="PrettyMenu">
             <DataBindings>
                <asp:MenuItemBinding DataMember="siteMapNode"
                  NavigateUrlField="url" TextField="title" ToolTipField="description"
                  ValueField="title"  />
              </DataBindings>
        </asp:menu><asp:XmlDataSource id="xmlMenu" runat="server" XPath="/*/*" DataFile="~/Links/Menu1.xml"></asp:XmlDataSource>
    </div>
    <div style="float:left; clear:right; z-index: 1; margin-left: 15px;">
        <asp:menu id="Menu2" runat="server" DataSourceID="xmlMenu" cssselectorclass="PrettyMenu">
             <DataBindings>
                <asp:MenuItemBinding DataMember="siteMapNode"
                  NavigateUrlField="url" TextField="title" ToolTipField="description"
                  ValueField="title"  />
              </DataBindings>
        </asp:menu><asp:XmlDataSource id="xmlMenu2" runat="server" XPath="/*/*" DataFile="~/Links/Menu1.xml"></asp:XmlDataSource>
    </div>
    </form>

CSS for Menus (modified version of PrettyMenu - I've removed all comments so the post wouldn't be so long...):

.foo {}
.PrettyMenu .AspNet-Menu-Vertical
{
    position:relative;
    top: 0em;
    left: 0em;
    z-index: 300;
}

.PrettyMenu ul
{
    background:#7795BD;
}

/* Top tier */
.PrettyMenu .AspNet-Menu-Vertical ul.AspNet-Menu
{
    width: 15em;
}

.PrettyMenu ul.AspNet-Menu ul
{
    width: 10.5em;
    left: 9.2em;
    top: 0em;
    border: solid 1px black;
}

.PrettyMenu ul.AspNet-Menu ul ul
{
    width: 11.5em;
    left: 10.4em;
}


.PrettyMenu ul.AspNet-Menu li
{
    background-color: White;
    border: 0px;
}

.PrettyMenu ul.AspNet-Menu li a,
.PrettyMenu ul.AspNet-Menu li span
{
    background-color: White;
    border: 0px;
    padding: 2px; 
}

.PrettyMenu ul.AspNet-Menu li.AspNet-Menu-Leaf a,
.PrettyMenu ul.AspNet-Menu li.AspNet-Menu-Leaf span
{
    background-image: none;
}

.PrettyMenu ul.AspNet-Menu li:hover, 
.PrettyMenu ul.AspNet-Menu li.AspNet-Menu-Hover
{
    background-color: white;
}

.PrettyMenu ul.AspNet-Menu li:hover a, 
.PrettyMenu ul.AspNet-Menu li:hover span, 
.PrettyMenu ul.AspNet-Menu li.AspNet-Menu-Hover a,
.PrettyMenu ul.AspNet-Menu li.AspNet-Menu-Hover span,
.PrettyMenu ul.AspNet-Menu li:hover li:hover a, 
.PrettyMenu ul.AspNet-Menu li:hover li:hover span, 
.PrettyMenu ul.AspNet-Menu li.AspNet-Menu-Hover li.AspNet-Menu-Hover a,
.PrettyMenu ul.AspNet-Menu li.AspNet-Menu-Hover li.AspNet-Menu-Hover span,
.PrettyMenu ul.AspNet-Menu li:hover li:hover ul a:hover, 
.PrettyMenu ul.AspNet-Menu li:hover li:hover ul span.Asp-Menu-Hover, 
.PrettyMenu ul.AspNet-Menu li.AspNet-Menu-Hover li.AspNet-Menu-Hover ul a:hover,
.PrettyMenu ul.AspNet-Menu li.AspNet-Menu-Hover li.AspNet-Menu-Hover ul span.Asp-Menu-Hover
{
	background-color: #d8d8d8;
    color: black;
}

.PrettyMenu ul.AspNet-Menu li:hover ul a, 
.PrettyMenu ul.AspNet-Menu li:hover ul span, 
.PrettyMenu ul.AspNet-Menu li.AspNet-Menu-Hover ul a,
.PrettyMenu ul.AspNet-Menu li.AspNet-Menu-Hover ul span,
.PrettyMenu ul.AspNet-Menu li:hover li:hover ul a, 
.PrettyMenu ul.AspNet-Menu li:hover li:hover ul span, 
.PrettyMenu ul.AspNet-Menu li.AspNet-Menu-Hover li.AspNet-Menu-Hover ul a,
.PrettyMenu ul.AspNet-Menu li.AspNet-Menu-Hover li.AspNet-Menu-Hover ul span
{
	background-color: White;
    color: black;
}

.PrettyMenu ul.AspNet-Menu li a:hover,
.PrettyMenu ul.AspNet-Menu li span.Asp-Menu-Hover
{
	background-color: White;
    color: black;
}

.PrettyMenu ul.AspNet-Menu li.AspNet-Menu-Leaf a:hover
{
    background-image: none;
}

Reply

sunscar9536

Member

2 Points

14 Posts

Re: Multiple Menus - Overlay Problem

Jan 08, 2007 02:59 PM|LINK

A little new development....

After playing with the Z-Index values, I finally got it to work within FireFox, but still no luck in IE. Does anyone know a fix or workaround for this?

The environment in which this is going to be used will be IE only....

Thanks

Reply

sunscar9536

Member

2 Points

14 Posts

Re: Multiple Menus - Overlay Problem

Jan 12, 2007 12:08 AM|LINK

I have tried every single z-index value I know of on every thing that even accepts a z-index value and still can't figure this one out... From what I've read z-index values and IE are very tricky.

I tested the exact same layout using the traditional ASP.NET menus and it works fine in both IE and Firefox...

Does ANYONE know what I can do to get around this problem? I would really appreciate some help.

Thanks...

Reply

Russ Helfand

Contributor

3304 Points

744 Posts

Re: Multiple Menus - Overlay Problem

Jan 12, 2007 01:26 AM|LINK

I did some experimentation and want to discuss what I found. First, I had to rework the sample you posted above because I didn't have the XML files that that markup referred to. No worries, I just whipped up some static menu items. Here's what I ended up with:

<%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>ASP.NET 2.0 CSS Friendly Control Adapters 1.0</title>
    <link runat="server" rel="stylesheet" href="~/CSS/Import.css" type="text/css" id="AdaptersInvariantImportCSS" />

.PrettyMenu ul
{
background:#7795BD;
}

/* Top tier */
.PrettyMenu .AspNet-Menu-Vertical ul.AspNet-Menu
{
width: 15em;
}

.PrettyMenu ul.AspNet-Menu ul
{
    width: 10.5em;
    left: 9.2em;
    top: 0em;
    border: solid 1px black;
}

.PrettyMenu ul.AspNet-Menu ul ul
{
width: 11.5em;
left: 10.4em;
}

.PrettyMenu ul.AspNet-Menu li
{
background-color: White;
border: 0px;
}

.PrettyMenu ul.AspNet-Menu li a,
.PrettyMenu ul.AspNet-Menu li span
{
    background-color: White;
    border: 0px;
    padding: 2px;
}

.PrettyMenu ul.AspNet-Menu li.AspNet-Menu-Leaf a,
.PrettyMenu ul.AspNet-Menu li.AspNet-Menu-Leaf span
{
background-image: none;
}

.PrettyMenu ul.AspNet-Menu li:hover,
.PrettyMenu ul.AspNet-Menu li.AspNet-Menu-Hover
{
background-color: white;
}

.PrettyMenu ul.AspNet-Menu li:hover a,
.PrettyMenu ul.AspNet-Menu li:hover span,
.PrettyMenu ul.AspNet-Menu li.AspNet-Menu-Hover a,
.PrettyMenu ul.AspNet-Menu li.AspNet-Menu-Hover span,
.PrettyMenu ul.AspNet-Menu li:hover li:hover a,
.PrettyMenu ul.AspNet-Menu li:hover li:hover span,
.PrettyMenu ul.AspNet-Menu li.AspNet-Menu-Hover li.AspNet-Menu-Hover a,
.PrettyMenu ul.AspNet-Menu li.AspNet-Menu-Hover li.AspNet-Menu-Hover span,
.PrettyMenu ul.AspNet-Menu li:hover li:hover ul a:hover,
.PrettyMenu ul.AspNet-Menu li:hover li:hover ul span.Asp-Menu-Hover,
.PrettyMenu ul.AspNet-Menu li.AspNet-Menu-Hover li.AspNet-Menu-Hover ul a:hover,
.PrettyMenu ul.AspNet-Menu li.AspNet-Menu-Hover li.AspNet-Menu-Hover ul span.Asp-Menu-Hover
{
background-color: #d8d8d8;
color: black;
}

.PrettyMenu ul.AspNet-Menu li:hover ul a,
.PrettyMenu ul.AspNet-Menu li:hover ul span,
.PrettyMenu ul.AspNet-Menu li.AspNet-Menu-Hover ul a,
.PrettyMenu ul.AspNet-Menu li.AspNet-Menu-Hover ul span,
.PrettyMenu ul.AspNet-Menu li:hover li:hover ul a,
.PrettyMenu ul.AspNet-Menu li:hover li:hover ul span,
.PrettyMenu ul.AspNet-Menu li.AspNet-Menu-Hover li.AspNet-Menu-Hover ul a,
.PrettyMenu ul.AspNet-Menu li.AspNet-Menu-Hover li.AspNet-Menu-Hover ul span
{
background-color: White;
color: black;
}

.PrettyMenu ul.AspNet-Menu li a:hover,
.PrettyMenu ul.AspNet-Menu li span.Asp-Menu-Hover
{
background-color: White;
color: black;
}

.PrettyMenu ul.AspNet-Menu li.AspNet-Menu-Leaf a:hover
{
    background-image: none;
}
    -->
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <div style="float: left; clear: right; z-index: 500; border: solid 1px red;">
            <asp:Menu ID="Menu1" runat="server" cssselectorclass="PrettyMenu">
                <Items>
                    <asp:MenuItem Text="Fruits">
                        <asp:MenuItem Text="Apple" />
                        <asp:MenuItem Text="Banana" />
                        <asp:MenuItem Text="Orange" />
                        <asp:MenuItem Text="Watermellon" />
                    </asp:MenuItem>
                </Items>
            </asp:Menu>
        </div>
        <div style="float: left; clear: right; z-index: 1; margin-left: 15px; border: solid 1px green;">
            <asp:Menu ID="Menu2" runat="server" cssselectorclass="PrettyMenu">
                <Items>
                    <asp:MenuItem Text="More links">
                        <asp:MenuItem Text="My first link" />
                        <asp:MenuItem Text="And now the second one" />
                        <asp:MenuItem Text="We are up to number three" />
                        <asp:MenuItem Text="Finally there is the fourth" />
                    </asp:MenuItem>
                </Items>
            </asp:Menu>
        </div>
    </form>
</body>
</html>

In Visual Studio 2005 SP1 I created a new web site based on the ASP.NET CSS Friendly Web Site template created when I installe the CSS Friendly adapter kit's VSI (http://www.asp.net/cssadapters). I used the markup shown immediately above in place of the markup originally present in my new web site's Default.aspx file.

When I then run this Default.aspx file from VS I found that the left-most menu's submenu was partially hidden beneath the top tier of the right-most menu. This seems comparable to the problem reported originally in this posting. That's good because it means we have a reproducible case that we can all run.

The problem is a manifestation of a know bug/problem/misunderstanding or different interpretation. I want to avoid politics here by getting fuzzy on whether or not this is actually a bug in IE. In any event it is described on the web in lots of places if you know what to search for. Here's one example: http://therealcrisp.xs4all.nl/ie7beta/css_zindex.html.

The solution can be pretty simple if you know (and can tolerate) it... put position:relative on the containing <div> tags, too.

In other words, in the markup shown immediately above, you would need to add position:relative in the inline "style" attribute seen on the two <div> tags. My testing shows that that fixes the problem. Do you see likewise? Can this "fix" be applied in your situation, too?

Russ Helfand
Groovybits.com

Reply

sunscar9536

Member

2 Points

14 Posts

Re: Multiple Menus - Overlay Problem

Jan 12, 2007 03:49 AM|LINK

Russ,

Thanks for the quick reply... For some reason I had my doubts, but it worked... =) thanks so much for the help.

I didn't know the "position: relative;" would be required for each DIV block.

I do have one more question and this may better as a new post, but is there any option to add a custom icon for a bullet next to each item on the second tier?

Thanks again for your time and help...

Reply

Russ Helfand

Contributor

3304 Points

744 Posts

Re: Multiple Menus - Overlay Problem

Jan 13, 2007 12:39 AM|LINK

Regarding your last question... can you add a custom icon next to each menu item in the second tier? This has been explored in similar postings like http://forums.asp.net/thread/1448602.aspx.

The basic idea will be to set up each menu item to have a unique ImageUrl value. The menu adapter is already smart enough to render an <img> tag if the ImageUrl is set for the menu item.

Clear as mud?

Russ Helfand
Groovybits.com

Reply

sunscar9536

Member

2 Points

14 Posts

Re: Multiple Menus - Overlay Problem

Jan 15, 2007 02:53 AM|LINK

Russ,

I followed that post and got it working with this code...

If e.Item.Text.StartsWith("image_") Then
            e.Item.Text = e.Item.Text.Remove(0, 6)
            e.Item.ImageUrl = "~/Images/" + e.Item.Text.Replace(" ", "") + ".gif"
        End If

This method works best if I want to add a custom icon, but I'm wanting to add the same "bullet.gif" to every menu item... Is there an easier or better method of accomplishing this?

Thanks...

Multiple Menus - Overlay Problem RSS

11 replies

sunscar9536

Multiple Menus - Overlay Problem

sunscar9536

Re: Multiple Menus - Overlay Problem

Russ Helfand

Re: Multiple Menus - Overlay Problem

sunscar9536

Re: Multiple Menus - Overlay Problem

sunscar9536

Re: Multiple Menus - Overlay Problem

sunscar9536

Re: Multiple Menus - Overlay Problem

Russ Helfand

Re: Multiple Menus - Overlay Problem

sunscar9536

Re: Multiple Menus - Overlay Problem

Russ Helfand

Re: Multiple Menus - Overlay Problem

sunscar9536

Re: Multiple Menus - Overlay Problem

This site is managed for Microsoft by Neudesic, LLC. | © 2013 Microsoft. All rights reserved.

Follow Us On:

Microsoft