Asp Menu control in Google Chrome does not display properly.

Question

5.00/5 (1 vote)

See more:

I have created a small sample with a modified ASP menu control. I have added some JavaScript that will change the background image of my menu when mouseOver on menu. If we view in Internet Explorer, it is displaying very good. If we view the page in Google Chrome browser, it is not showing any image on mouseOver. It is even displayed in a distorted manner. The working example can be seen here.

http://aspspider.info/iamIndynos/[^]

If anyone has had this issue before, please help me to solve this problem. Is there any problem with Google Chrome??

Thanks in advance.

Posted 18-Feb-10 1:58am

AsemIM

Updated 8-Mar-10 0:07am

Deeksha Shenoy

v2

Add a Solution

6 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

AsemIM · Answer 1 · 2010-02-18T02:01:00

just adding some more codes..
My JavaScript is here:

C#

.myStyle
{
     background-image: url('Buttons/buttonBackground.png');
     
}
 .myStyle1
{
     background-image: url('Buttons/menuBack.png');
}

And my menu is here ......

XML

<asp:Menu ID="Menu2" runat="server">
                                    <StaticSelectedStyle CssClass="myStyle1" />
                            <StaticMenuItemStyle CssClass="myStyle" ForeColor="Yellow" HorizontalPadding="5px" VerticalPadding="2px" 
                                BackColor="#F3F3EE" />
                            <DynamicHoverStyle CssClass="myStyle" BackColor="#CC00CC" ForeColor="White" />
                            <DynamicSelectedStyle BackColor="#CC00CC" />
                            <DynamicMenuItemStyle CssClass="myStyle1"  HorizontalPadding="5px" VerticalPadding="2px" 
                                BackColor="#F3F3EE" />
                            <StaticHoverStyle CssClass="myStyle1" ForeColor="White" />
                                        <Items>
<asp:MenuItem Text="Choose One to Check " Value="Choose One to Kill"></asp:MenuItem>
                                            <asp:MenuItem Text="link For Asem __" Value="New Item"></asp:MenuItem>
                                            <asp:MenuItem Text="link For  Peter __" Value="New Item"></asp:MenuItem>
                                            <asp:MenuItem Text="link For  SanKar __" Value="New Item"></asp:MenuItem>
                                            <asp:MenuItem Text="link For  Baby __" Value="New Item"></asp:MenuItem>
                                            <asp:MenuItem Text="link For  All __" Value="New Item"></asp:MenuItem>
                                        </Items>
                                    </asp:Menu>

Sandesh M Patil · Answer 2 · 2010-05-03T04:10:00

protected void Page_PreInit(object sender, EventArgs e)
{
    // This is necessary because Safari and Chrome browsers don't display the Menu control correctly.
    // All webpages displaying an ASP.NET menu control must inherit this class.
    if (Request.ServerVariables["http_user_agent"].IndexOf("Safari",StringComparison.CurrentCultureIgnoreCase) != -1)
               Page.ClientTarget = "uplevel";
}

Hope this may help u... :)

Rajesh Kumar Chekuri · Answer 3 · 2011-03-22T19:10:00

After adding this one it's work for all browsers

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

for IE8...
Add css Proferty in StyleSheet

.IE8Fix
{
    z-index: 1000;
}

and add the css property as follows...

<asp:Menu runat="server" >
  <DynamicMenuStyle CssClass="IE8Fix" />
</asp:Menu>

kuekue · Answer 4 · 2010-03-07T22:54:00

Solution 2

Add this code into the masterpage:

C#

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 7-Mar-10 22:54pm

kuekue

Updated 8-Mar-10 0:08am

v2

Comments

TamiruD 4-Sep-13 8:36am

this code was amazing! thanks for the TIP!!!

vipsha · Answer 5 · 2010-04-27T21:47:00

Solution 17

hi, no need to write long and long script for that,
just try this in page_load event in which menu is resides.

C#

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

thank,
mahesh patel

Posted 27-Apr-10 21:47pm

vipsha

Comments

AshishChaudha 3-Oct-12 4:37am

This will surely work.

dkumar.wd · Answer 6 · 2012-10-02T21:18:00

Solution 61

Thanks Solution 2 Worked perfectly.....

Posted 2-Oct-12 21:18pm

dkumar.wd

Comments

Achha Insan 3-Oct-12 5:34am

nothing is impossible. you can do it.

Asp Menu control in Google Chrome does not display properly.

6 solutions

Solution 1

Solution 49

Solution 60

Solution 2

Solution 17

Solution 61

Add your solution here

Preview 0