I am in the process of overhauling one of my websites and one of my priorities is to get away from tables. Of course, I didn't make that decision until I had already done a fair amount of work with a mixture of tables and divs (www.jmfloorcovering.com).
To make the transition easier, I am trying to do one thing at a time. I changed the header slightly and now have it displaying the way I would like (in the test page below, not on the home page). The navbar, on the other hand, is causing me to lose hair and sleep. If you visit the home page I linked to above, you can at least see what the navbar is s'posed to do -- how the popup menus are positioned over the navbar.
Now look at my test page: http://www.jmfloorcovering.com/test/header_with_nav/header_nav.html
As you can see, the popups are waaaay off, no matter what size window you view it in. The navbar is supposed to be centered and falls 15px above the bottom of the header background graphic. It seems to be positioned correctly and centered. The popup menus also at least popup on the right horizontal plane. They just don't position themselves over the buttons like they should (see the home page)
Not only that, Macromedia Fireworks, which I used to make the navbar, wrote the code using tables (the popup code is in divs/css though). I was hoping someone could help me fix the alignment problem and also help me change the code to div/css.
The css code is too lengthy, but you can download it HERE. The navbar related code is near the bottom. Viewing the page source, of course, will show you the pertinent XHTML.
I hope someone can help. Thank you for any suggestions.