IE8 and the Menu

rwest · #1 (**permalink**) March 23rd, 2009, 11:18 AM

Hi

I am using (non-Beta) Internet Explorer 8 and can not see the menu subitems - they just display as white boxes as if there was no CSS style applied. This also happens on the www.planetwrox.com website. If I turn on compatability mode then the menu system works as intended. Any ideas?

philip_cole · #2 (**permalink**) March 23rd, 2009, 11:40 AM

There's been a few posts raised on this around the web - just google "ie8 asp.net menu". There are a few workarounds on an MSDN blog at http://blogs.msdn.com/giorgio/archiv...ite-issue.aspx

Phil

Imar · #3 (**permalink**) March 23rd, 2009, 11:43 AM

Hi there,

The way IE8 renders is different from previous versions. The asp:Menu assumes incorrect defaults with regards to the z-index of the menu items. The ASP.NET team seems to be working on a fix for this problem.

In the mean time, take a look here to learn how you can work around the issue yourself: http://blogs.msdn.com/giorgio/archiv...ite-issue.aspx

In your case, you can fix the Planet Wrox site as follows:

1. In MasterPage.master add a new DynamicMenuStyle item like this:

Code:

 
<asp:Menu ID="Menu1" runat="server" CssClass="MainMenu" ....>
  <DynamicMenuStyle CssClass="DynamicMenuStyle" />
  ...

Next, in Monochrome.css for the Monochrome theme add the following selector:

.DynamicMenuStyle
{
z-index: 1000;
}

I'll fix the live version of PlanetWrox.com....

Hope this helps,

Imar

Imar · #4 (**permalink**) March 24th, 2009, 11:26 AM

The fix for the menu has now been released by the ASP.NET team: http://weblogs.asp.net/bleroy/archiv...available.aspx

Imar

rwest · #5 (**permalink**) March 24th, 2009, 11:33 AM

Thanks very much for your help Imar. It looks like my question was timed perfectly with the fix from MS

lcouvillon · #6 (**permalink**) February 28th, 2010, 03:29 PM

This is very helpful and timely.

regards

hosam93 · #7 (**permalink**) April 23rd, 2010, 06:39 PM

Thank you very much!

It works in IE8
But can you please get it to work well in google chrome?
Thank you.

jack_hilary · #8 (**permalink**) April 24th, 2010, 01:16 AM

Quote:

But can you please get it to work well in google chrome?

The solution provided by Imar that is setting the z index value works fine for Google Chrome too.

Without setting z -index you will be getting level navigation in Chrome and not the smooth dropdown one. So using

Code:

.DynamicMenuStyle
{
z-index: 1000; 
}

works fine in every browser. However any positive value for z index will work fine.

Hope this helps.

Cheers,

Jack

hosam93 · #9 (**permalink**) April 24th, 2010, 11:30 AM

Quote:

Originally Posted by jack_hilary

The solution provided by Imar that is setting the z index value works fine for Google Chrome too.

Without setting z -index you will be getting level navigation in Chrome and not the smooth dropdown one.

Weird ...
It's still not working on Google Chrome.

That's how it works in IE8 all good:
http://img40.imageshack.us/img40/7407/nonamea.png

That's how it works on Google Chrome is not good:
http://img687.imageshack.us/img687/3017/noname2.png

Imar · #10 (**permalink**) April 24th, 2010, 01:15 PM

Hi there,

The patch affects mainly IE 8. After applying the patch on the server, for Chrome you need to add the following to Pre_Init in the BasePage:

Code:

 
if (Request.ServerVariables["http_user_agent"].IndexOf("Safari", StringComparison.CurrentCultureIgnoreCase) != -1)
{
  Page.ClientTarget = "uplevel";
}

For some reason, Chrome is seen as a downlevel browser.

For more details and the original code: http://www.google.com/support/forum/...6ec06af7&hl=en

Cheers,

Imar

Need to download code?

Navigation