View source for GRC's New CSS Nav Problems

On 8/17/2006 I noticed a problem with [[wp:Gibson Research Corporation|GRC.com's]] new CSS menus located at http://www.grc.com/menu2/invitro.htm .  GRC is owned by [[wp:Steve Gibson|Steve Gibson]] the security expert on [http://twit.tv twit.tv's] [[wp:podcast|Podcast]] [[wp:Security Now!|Security Now]] located [http://www.twit.tv/SN here,] which I thoroughly enjoy listening to.  That is why I wrote Steve and informed him about this problem with his new CSS menus.  --[[User:ThePlaz|Plaz]] 10:41, 17 August 2006 (EDT)
[[Category:Tech]][[Category:Blog Posts]]
----

One thing about your new CSS menus, Steve.  If you have CSS off, because you are using a cellphone or really old browser, the menu will be at the top.  Unfortunately that means you will have to scroll through it to get to the content on every page view on ancient browsers or small screens.

A better way to do it, I believe, is the way Wikipedia does it.  When CSS is disabled a "jump to nav" link appears at the top of the page.  This is hidden in the normal CSS, so it doesn't bother normal users.  The navigation is then on the bottom.  This works because the navigation is actually after the page content in the html source.  This makes it appear last without CSS.  However, when CSS is working, the navigation gets absolutely positioned to the top of the page.  Give it a try (with and without CSS) at http://en.wikipedia.org/wiki/Security_Now

This means that, with your new nav system, it is a pain to have to scroll through the navigation (which is about 2 pages long without CSS) just to get to the page content.  Not to mention the screen readers for the blind will read through the 2 pages navigation first, before getting to the content. And they will repeat this on every page.
Anyway, most of the time users click to another page through links in the content, not go to navigation.

Therefore I believe that this could be a serious problem for the new CSS nav system.  You might get around it by wrapping the entire thing in a <div>, and then absolutely positioning that div at the top of the page (0,0), while moving the html source under the page's content.
Thanks-Michael Plasmeier (theplaz.com)