Oh sweet, pure css image maps in a nested list, it brings a tear to my eye
One last thing to suggest, alter:
<ul id="navbar">
<li id="section1b"><a href="#1"></a></li>
<li id="section2b"><a href="#2"></a></li>
<li id="section3b"><a href="#3"></a></li>
<li id="section4b"><a href="#4"></a></li>
<li id="section5b"><a href="#5"></a></li>
<li id="section6b"><a href="#6"></a></li>
<li id="section7b"><a href="#7"></a></li>
<li id="section8b"><a href="#8"></a></li>
</ul>
- <ul id="navbar">
- <li id="section1b"><a href="#1"></a></li>
- <li id="section2b"><a href="#2"></a></li>
- <li id="section3b"><a href="#3"></a></li>
- <li id="section4b"><a href="#4"></a></li>
- <li id="section5b"><a href="#5"></a></li>
- <li id="section6b"><a href="#6"></a></li>
- <li id="section7b"><a href="#7"></a></li>
- <li id="section8b"><a href="#8"></a></li>
- </ul>
To
<ul id="navbar">
<li id="section1b"><a href="#1">Bizarro Productions</a></li>
<li id="section2b"><a href="#2">Forum</a></li>
<li id="section3b"><a href="#3">Flash</a></li>
<li id="section4b"><a href="#4">Song Of the Day</a></li>
<li id="section5b"><a href="#5">Image Gallery</a></li>
<li id="section6b"><a href="#6">Tutorials</a></li>
<li id="section7b"><a href="#7">About</a></li>
<li id="section8b"><a href="#8">Links</a></li>
</ul>
- <ul id="navbar">
- <li id="section1b"><a href="#1">Bizarro Productions</a></li>
- <li id="section2b"><a href="#2">Forum</a></li>
- <li id="section3b"><a href="#3">Flash</a></li>
- <li id="section4b"><a href="#4">Song Of the Day</a></li>
- <li id="section5b"><a href="#5">Image Gallery</a></li>
- <li id="section6b"><a href="#6">Tutorials</a></li>
- <li id="section7b"><a href="#7">About</a></li>
- <li id="section8b"><a href="#8">Links</a></li>
- </ul>
Then use the image replacement I talked about on this thread
http://www.ozzu.com/website-design-forum/using-images-links-t28065.html
It gives some anchor text which is really important for SEO and accessibility. Once you've done that try viewing it on lynx (a text browser)
Oh, important note, put a 1px black border on the main container div, you are getting the annoying mozilla bug where the left edge dissappears off the left side of the screen. Plus I've PM'd you a question
//edit: Ok scrap that Idea about the 1px border, I've been being so dumb with that, it's such a dirty hack. Instead add a min-width to the body of the document. That will overcome the mozilla error without affecting IE. Is a much better solution to the problem, don't know why I didn't think of it before.
CSS website design tutorials