hi tf22raptor,
It's great that you gave this method a shot. One more web designer working in a tableless layout and utilizing css for the power it gives a well marked up html document is better for the web world! If you are really keen about understanding it more and the reason why it really means so much grab this book...http://www.zeldman.com/dwws/. It was written years back but it is different from your regular code book...this gives you the reasons why it all makes sense. I swear if you read it from then on you will be a Web Standards Junkie. Going this route unlocks so so much. HTML, CSS, and JS all start to work beautifully together.
Okay...I will try and answer your questions...
1. CSS Spec: this is basic css, supported across all browsers (probably all these were in CSS1)
2. Where the link name is "Item 1" change that to what the text in your image link is - say "Contact Us", "About Us" etc. -- Serach Engines pick this up b/c they crawl your sites without css and js. (As an add on in the anchor tag add a title="[whatever in here]" - this will show when a user hovers your image)
3. Sites and Tutorials: Grab yourself a Reader (like Google Reader) and subscribe to RSS feeds from places like Smashing Mag, Nettuts
4. Font Size: I prefer em of px, but nowadays that is kind of non issue. This is b/c browsers have the zoom feature that scales the text. Years back px would fix the size and the user could not alter it. an Em they could alter with the "Larger, Smaller" settings.
5. Varying Image size: Just take the width and height out of the #nav li a {} code and put one in each of the item1 a {} style declarations...then you can change them individually.
Hope this helps.
Ed
pS: Not sure but another tip would be install Firebug AddOn for Firefox, or Chrome, Safari and IE8 all have web developer inspectors that you can use to analyze and troubleshoot code.