ASP.NET 4.0: Extra space above Menu in Chrome and Safari using Menu Control

In Visual Studio 2010 when creating a new ASP.NET Web Site or ASP.NET Web Application you get a shell for ASP.NET 4.0 web site with a menu using the ASP.NET 4.0 Menu Control. However in Google Chrome and Safari browsers the menu will show with some extra space above it. It took plenty of googling to find the answer since google is filled with solutions for Chrome problems in ASP.NET 2.0.
Finally – the solution for .NET Framework 4.0:

Add these lines to the Site.css file (in the Styles folder of your VS 2010 project)
[code lang=”css”]
/* Fix for extra space above menu in Chrome and Safari */
img[alt=’Skip Navigation Links’] {
display: none;
}
[/code]

An alternative is to add SkipLinkText=”” to each menu item (have not tested this)

Thanks to MattyF for the solution

17 comments

  1. Do no use this. This image is used by screen readers. It is an accesibilty feature. display:none also hides it from screen readers. Use this instead:

    img[alt=’Skip Navigation Links’] {
    position:absolute;
    left:-10000px;
    top:auto;
    width:1px;
    height:1px;
    overflow:hidden;}

  2. /* Fix for extra space above menu in Chrome and Safari */
    img[alt=’Skip Navigation Links’] {
    display: none;
    }

    This is good solution but it will create problem in Mozilla Firefox. In Firefox it will add some space in header

  3. The above solution

    img[alt=’Skip Navigation Links’] {
    display: none;
    }

    is working fine but after applying this it is creating problem in Mozilla Firefox.

    Can you please advice for this?

Leave a comment

Your email address will not be published. Required fields are marked *