22 December 2010

ASP Menu leaving empty space above menu items

Today I was having trouble with an ASP.Net Menu control that kept a bit of empty space above, which made it render too low in the div element it was supposed to stay inside of:
This problem just came out of nowhere, one day my menu is showing as it should, the next day, it is not. I even tried rolling back to the older version of the files, but somehow this didn't change a thing. It might have been an update to Visual Studio 2010, which got automatically installed or something.

After looking into the rendered html with IE8 and its developer tools (press F12 to get these, then CTRL-B to click an element in the page and have its tag selected in the developer tool), I discoverd an a-element above my Menu:
(The div with class Menu is my own div, in it you see the table with class ct100_Menu1_2 which is the actual menu, with 2 a elements around it)

After looking into this #ct100_Menu1_SkipLink I found a property SkipLinkText on the Menu control. If you set it to the empty string (SkipLinkText=""), the strange empty space is gone!

Please be aware though, that these SkipLinks are meant for people who are using a screen reader. The text in it is read aloud and allows a visually impaired user to skip the menu and jump to the contents of the page by following this link. The fix I described here removes this so-called skiplink and thus makes your page less user-friendly for the visually impaired.


RB said...

Thx Michael your solution and another here http://blog.tjitjing.com/index.php/2011/03/asp-net-4-0extra-space-above-menu-in-chrome-and-safari-using-menu-control.html

sharepointalex said...

Hi Michael - just wanted to say thanks for the solution - I tried the one posted in the comment above first but this didn't work - yours did though :-)



Michael Jepson said...

Hi Alex,

Glad I could help. Thanks for your message.



Anonymous said...


Anonymous said...

Thanks a lot

Anonymous said...

Great article

We can also submit our .net related article links on http://www.dotnettechy.com to increase traffic

Anonymous said...

Hours of google'ing. Two minutes looking at your blog solved the problem. Thanks!

Anonymous said...

thanks it was useful

Anonymous said...

Many Thanks

Anonymous said...

Many thanks

Anonymous said...

Niiiiiiice! Thanks Microsoft for more hours wasted.

Good job Michael!

berk said...