Friday, September 05, 2008

ASP.NET Menu control not being rendered properly in Google Chrome

Today i tried installing the Google Chrome in my laptop machine. Although it is light and nice in look and rich in features (as usual from Google), it showed some weired behaviour when i open my online applications. Especially the ASP.Net Menu Control was not rendered as is to be.

It does not display the child nodes on hover and when we click any menu item, it then refresh the page with child nodes...

Cause & Resolution

The reason for this weird behaviour is just because the way the menus are rendered in chrome is different from IE and Fire Fox (FF). The recent chrome browser render the <a> component as <div> and <span> . If you look into the view source, you may notice that the menu structure as below.
<div id="ctl00_mainMenu">
<span><a class="ctl00_mainMenu_1" href="Test1.aspx">Menu1</a></span>
<span><a class="ctl00_mainMenu_1" href="Test2.aspx">Menu2</a></span>
<span><a class="ctl00_mainMenu_1" href="Test3.aspx">Mwnu3</a></span>
</div>
It is because of both Internet Explorer and Firefox render the ASP.NET Menu control as <table>--<a> mark up.
However, the rendered mark up for the latest beta version of Google Chrome will be like the following code, the <table> and <a> become to <div> and <span> :
And the best resolution for the subject issue is to ASP.NET 2.0 CSS Friendly Control Adapters 1.0. This adapter will render the ASP.NET Menu in Google Chrome properly
-::-

3 comments:

DigiOz Multimedia said...

Hi,

Thank you for this information. I actually just started looking into this Menu issue with Chrome per customer request. The way I see it though it is Google's responsibility to comply with the behavior of other main stream browsers, not the other way around!

But your solution is very much appreciated.

Pete Soheil
DigiOz Multimedia
www.digioz.com

bytesun said...

just write this in Page_Load()
in c# file
for asp.net with csharp

if (Request.UserAgent.IndexOf("AppleWebKit") > 0)
{
Request.Browser.Adapters.Clear();
}
########################3
//Looks like this:
protected void Page_Load(object sender, EventArgs e)
{

if (Request.UserAgent.IndexOf("AppleWebKit") > 0)
{
Request.Browser.Adapters.Clear();
}

}

igitur said...

This is just proof again that browser sniffing is a bad bad thing, especially on the server-side of things.