Geeks With Blogs
Mayank Sharma

I was caught off-gaurd today when a user of one my applications reported that the asp:Menu was not rendering properly in her IE browser. I checked the version and it was IE8. I changed the application to compatibility view and the menu rendered just fine.

Since I cannot tell each and every user to view the app in compatibility view when in IE8, i started digging for solutions. It looked like a z-index problem to start with. The problem was that since the new IE8 is moving closer to standards, the z-index value was set to "auto" when not specified. I tried changing it something bigger than its container's z-index value woo-hoo...it worked.

I just added this line in the CSS class definition:

z-index : 100; /* Setting z-index because of an IE8 bug */

Since it is a bug, there are some hotfixes available from MS here.

This problem prompted me to look for rendering in Chrome and Safari also.

The asp:Menu control looks horrible in Chrome. There are no popups, just plain static text. I stumbled upon this thread which discusses this problem. I did not use the method posted in that thread, instead, I used a solution posted by user Mark Perkins which to me looked like the simplest and cleanest solution. Here is what he posted:

Put this piece of code in your Master page code file:

// Adding this override so that the asp:Menu control renders properly in Safari and Chrome
 
    protected override void AddedControl(Control control, int index)
    {
        if (Request.ServerVariables["http_user_agent"].IndexOf("Safari", StringComparison.CurrentCultureIgnoreCase) != -1)
        {
            this.Page.ClientTarget = "uplevel";
        }
        base.AddedControl(control, index);
    }

 

Posted on Wednesday, July 8, 2009 9:00 AM ASP.NET | Back to top


Comments on this post: asp:Menu rendering problems in IE8, Safari and Chrome

# re: asp:Menu rendering problems in IE8, Safari and Chrome
Requesting Gravatar...
Thanks! This piece of code finally worked to bring visibility to my menu! I had to add it to my master page code-behind file, like so:

public partial class App_Components_default : System.Web.UI.MasterPage
{
protected override void AddedControl(Control control, int index)
{
if (Request.ServerVariables["http_user_agent"].IndexOf("Safari", StringComparison.CurrentCultureIgnoreCase) != -1)
{
this.Page.ClientTarget = "uplevel";
}
base.AddedControl(control, index);
}
protected void Page_Load(object sender, EventArgs e)
{

}
}
Left by Todd Huotari on Oct 02, 2009 3:35 PM

# re: asp:Menu rendering problems in IE8, Safari and Chrome
Requesting Gravatar...
Hi, This is a great post, its help me out great. THIS IS TRUSTED ONE POST. Recommended.....
Left by Saad on Nov 02, 2009 6:00 PM

# re: asp:Menu rendering problems in IE8, Safari and Chrome
Requesting Gravatar...
You are my saviour! Thanks...
Left by leonard on Nov 05, 2009 3:20 PM

# re: asp:Menu rendering problems in IE8, Safari and Chrome
Requesting Gravatar...
How do you add the code to the "CSS class definition." Sorry I am new to all of this!
Left by DBounlom on Nov 06, 2009 5:32 PM

# re: asp:Menu rendering problems in IE8, Safari and Chrome
Requesting Gravatar...

*DBounlom
the code is for when you are using asp.net. You can put in the code behind file.
Left by Max on Nov 06, 2009 5:56 PM

# re: asp:Menu rendering problems in IE8, Safari and Chrome
Requesting Gravatar...
Super...It works. I had same problem. I used this piece of code in the master page.
if (Request.UserAgent.IndexOf("AppleWebKit") > 0)
{
Request.Browser.Adapters.Clear();
}
But its not working for the first time it loads. I tried the above code. Now its Working. Great post.
Left by Nagasai on Feb 22, 2010 4:51 AM

# re: asp:Menu rendering problems in IE8, Safari and Chrome
Requesting Gravatar...
Thanks, i find for this solve for 1 day, but i found this page and can solve my problem.


Many Thanks.
Left by Kue on Mar 08, 2010 10:08 PM

# re: asp:Menu rendering problems in IE8, Safari and Chrome
Requesting Gravatar...
Great Post

It works like a charm
Left by vinita on Mar 11, 2010 4:02 AM

# re: asp:Menu rendering problems in IE8, Safari and Chrome
Requesting Gravatar...
Perfect !! I added this to my masterpage and everything worked like a charm. Thanks :-)
Left by Jaden on Mar 14, 2010 8:36 PM

# re: asp:Menu rendering problems in IE8, Safari and Chrome
Requesting Gravatar...
I had the same rendering problem which I fixed up this way. I found
text menu and much more amazing controls at http://www.obout.com
these controls works on every internet navigator.
Left by Ulsenio on Mar 27, 2010 2:12 AM

# re: asp:Menu rendering problems in IE8, Safari and Chrome
Requesting Gravatar...
Perfect !! I added this to my masterpage and everything worked like a charm. Thanks :-). Problem solved within one minute!!!!
Left by Peter Winterberg on Mar 27, 2010 2:31 PM

# re: asp:Menu rendering problems in IE8, Safari and Chrome
Requesting Gravatar...
i tried the same code as Nagasai (above), which is all over the web, and it wasn't working for me either; it was very inconsistent.

your code has not failed once, from the first reload.

thank you.
Left by wazz on Jul 01, 2010 8:34 AM

# re: asp:Menu rendering problems in IE8, Safari and Chrome
Requesting Gravatar...
Thanks a lot. That solved my problem!
Left by Aurelio on Jul 29, 2010 7:03 AM

# re: asp:Menu rendering problems in IE8, Safari and Chrome
Requesting Gravatar...
Thanks. It works perfectly for my new project.
Left by Patrick on Jul 29, 2010 11:49 AM

# re: asp:Menu rendering problems in IE8, Safari and Chrome
Requesting Gravatar...
Thanks you very much,I'm from Uruguay and I was loooking for this error and in one day I could find it. My problem was about a menu which in the rendering the HTML code generated change according the browser.
Again thanks, you save my life haha.

Left by Sergio on Feb 18, 2011 8:44 AM

# re: asp:Menu rendering problems in IE8, Safari and Chrome
Requesting Gravatar...
Glad it helped!
Left by Max on Feb 18, 2011 8:54 AM

# re: asp:Menu rendering problems in IE8, Safari and Chrome
Requesting Gravatar...
Does Not seem to help. Here is my code in the master page. Any Ideas?

Partial Public Class App_Components_default
Inherits System.Web.UI.MasterPage
Protected Overrides Sub AddedControl(ByVal control As Control, ByVal index As Integer)
If Request.ServerVariables("http_user_agent").IndexOf("Safari", StringComparison.CurrentCultureIgnoreCase) <> -1 Then
Me.Page.ClientTarget = "uplevel"
End If
MyBase.AddedControl(control, index)
End Sub
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)

End Sub
End Class


Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
'If Request.UserAgent.IndexOf("AppleWebKit") > 0 Then
' Request.Browser.Adapters.Clear()
'End If
'If Request.UserAgent IsNot Nothing AndAlso (Request.UserAgent.IndexOf("AppleWebKit") > -1) Then
' Request.Browser.Adapters.Clear()
'End If


End Sub
Left by DWb on Apr 24, 2011 9:30 AM

# re: asp:Menu rendering problems in IE8, Safari and Chrome
Requesting Gravatar...
Superb, i have used this solution in my project
Left by Ramakrishnan on Dec 02, 2011 5:44 AM

# re: asp:Menu rendering problems in IE8, Safari and Chrome
Requesting Gravatar...
Delete all code from ur master page and add this code just change
public partial class "Client" : System.Web.UI.MasterPage
double qoutes word with your partial class "Name"


using System;
using System.Collections.Generic;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class Client : System.Web.UI.MasterPage
{
protected override void AddedControl(Control control, int index)
{
if (Request.ServerVariables["http_user_agent"].IndexOf("Safari", StringComparison.CurrentCultureIgnoreCase) != -1)
{
this.Page.ClientTarget = "uplevel";
}
base.AddedControl(control, index);
}

protected void Page_Load(object sender, EventArgs e)
{

}
}

Paste it and render your web page and confirmed menu bar appears.


Left by Engr Ikram on Jul 31, 2012 3:22 AM

# re: asp:Menu rendering problems in IE8, Safari and Chrome
Requesting Gravatar...
i have used this solution in my project and my solution was like this:

I Create a new App_brouser asp.net folder and put into his code this peace of code

<browsers>
<browser refID="Safari1Plus">
<controlAdapters>
<adapter controlType="System.Web.UI.WebControls.Menu" adapterType="" />
</controlAdapters>
</browser>
</browsers>

And then all my problems are resolved without a code in code-behind.
I hope this solution can helsp someone.
And sorry bout my english coz i'm brasilian.
Left by Charles on Nov 26, 2012 6:09 AM

# re: asp:Menu rendering problems in IE8, Safari and Chrome
Requesting Gravatar...
Thanks, this is the best solution. Problem resolved!!!
Left by Gustavo on Dec 06, 2012 3:53 PM

# re: asp:Menu rendering problems in IE8, Safari and Chrome
Requesting Gravatar...
Thanks, This is the only solution that worked.
Left by Bill Oeftering on Feb 06, 2013 7:30 AM

# re: asp:Menu rendering problems in IE8, Safari and Chrome
Requesting Gravatar...
Really a wonderfull post.
Left by Yogi on Feb 13, 2013 11:40 AM

Your comment:
 (will show your gravatar)


Copyright © bullpit | Powered by: GeeksWithBlogs.net