Dynamic dropdown menu hiding in IE7

rayhawk · September 10th, 2009, 10:34 PM

Hi guys. I am trying to set up my main menu subitems to come out on hover over the main links. My design is basically the same as the original beerhouse setup, I just changed the sitemap file around, and have made some CSS changes as well (colors, etc). The menu works as expected in FF3, but not correctly in IE7 (haven't tried other IE versions yet). Basically, the menu works but is hidden behind the page content, as you can only view the very top portion when you hover over the main link. I found some references to problems with IE8 relating to the z-index, but those solutions are not solving my problem. Has anybody else tried to make the dynamic menus work with the beerhouse site and how did you solve this issue?

Scott663 · September 11th, 2009, 12:20 PM

It is odd that you are having Menu problems in IE7. I had problems with the dynamic fly-out menus in all browsers except IE7. Each browser (IE8, IE6, FF3, Opera, Safari, Chrome) required separate fixes, but eventually I got it working.

Are you actually using IE7 or just using IE8 in Compatibility Mode? I have found that Compatibility Mode does not always do a good job of simulating IE7. I often found instances where my site breaks in Compatibility Mode when it actually works fine in IE7.

rayhawk · September 12th, 2009, 08:55 AM

I am using IE7, not a compatibility mode. Do you have an example of the code you used? This is how I modified the template.master file:

Code:

<body>
<formid="Main"runat="server">
<asp:ScriptManagerID="ScriptManager1"runat="server">
</asp:ScriptManager>
<divid="PageWrapper"><divid="header">
<divid="header2">
<divid="headermenu">
<asp:MenuID="mnuHeader"runat="server"DataSourceID="SiteMapDataSource1"
Orientation="Horizontal"MaximumDynamicDisplayLevels="2"SkipLinkText=""StaticDisplayLevels="2"meta:resourcekey="mnuHeaderResource1">
<StaticMenuStyleCssClass="StaticMenuStyle"/>
<StaticMenuItemStyleCssClass="StaticMenuItemStyle"/>
<DynamicHoverStyleCssClass="DynamicHoverStyle"/>
<DynamicMenuStyleCssClass="DynamicMenuStyle"/>
<DynamicItemTemplate>
<%# Eval("Text") %>
</DynamicItemTemplate>
<DynamicMenuItemStyleCssClass="DynamicMenuItemStyle"/>
<StaticHoverStyleCssClass="StaticHoverStyle"/>
</asp:Menu>
</div></div><!--end header2 div-->
<divid="loginbox">
....

I won't bother posting the CSS file, but it is definitely not a background color issue or anything like that, as I said it works fine in FF3. I didn't want to post too much code but the rest of the divs are closed a bit later.

When you say those other browsers required seperate fixes, do you mean you utilized z-index fixes specific to the browser, or was it something in your html structure, or something else? Thanks.

Scott663 · September 12th, 2009, 10:17 PM

Here is my Menu code:

<asp:MenuID="Menu_Side"runat="server"Visible="false"StaticEnableDefaultPopOutImage=FalseDynamicEnableDefaultPopOutImage=False>
<StaticMenuItemStyleCssClass="MenuSide"/>
<DynamicMenuItemStyleCssClass="MenuSide-Kids"/>
<DynamicMenuStyleCssClass="IE8MenuFix"/>
</asp:Menu>

It works fine in IE7, but the dynamic menus didn't appear in IE8 so I added the following line:

<DynamicMenuStyleCssClass="IE8MenuFix"/>

And the following style rule:

.IE8MenuFix { z-index: 350; }

Tweaks for other browsers had to do with positioning and sizing issues.

You may want to remove all the CSS references and see if the menu works, then apply one rule at a time to see where it breaks. You could also try creating a new ASPX page with only your menu code to see if it works there.

Good luck, Scott.

rayhawk · September 14th, 2009, 08:43 PM

OK, thanks for the help. I am working on it (slowly, obviously) and am finding that it appears to not be expanding the menu long enough in IE7. If I make the font small, you can view more of the links because they fit in a smaller space. So it is definitely not a z-index issue.

So now the question is, how do I get the menu to expand down appropriately based on the amount of links/size of text?