Strange extra padding in chrome using standard VS 2010 template

Set SkipLinkText="" in the menu.

<asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" IncludeStyleBlock="false" Orientation="Horizontal" SkipLinkText="">

The padding will vanish.

Both Safari and Chrome have a problem with this. It's accessibility feature in the Menu Control.If you interested in more information:http://sim4all.com/blogging/?p=47

Just a follow-up on this. using the above methods to fix this issue is not recommended. There is a very good reason for that image being there. It is an accessibility feature to allow people with screen readers to skip navigation menus and move directly to the content.

See explanation here: http://webaim.org/techniques/skipnav/

Using display: none; hides the link from screen readers as well as visual users, rendering it useless. Changing the link text will mean that people that are looking for it will not be able to find it.

The recommended approach is to leave the image visible, yet move it off the screen. That way it cannot be seen, but screen readers will still find it. Add the below CSS to acheive this:

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

That will fix the issue, without affecting accessibility.

It's the image inside the 'skip links', not sure why you need it. Try this in your CSS:

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