Ok, I have now updated the layout with the suggestions (See Updates). I made the background for the menu items (instead of using the spans). Put the header as the background and extracted the logo to make it an image siting on top of the header background. Made the footer a background. I did combine these three items into one sprite. Also changed the menu to use block and float.
As you can see, the menu items are not aligned properly. For some reason they are not lined up with the menu div tag. Plus was trying to align them center, but that didn’t work either (I am assuming because of the floats). Plus the space that is now between the menu and content blocks. On a plus side, it looks the same on firefox, safari, and IE.
With the logo (and possibly menu items) should I use exact positioning? Right now I am using padding on the header. And with exact positioning, I could drop the menu sprite and align the items in relation to the background (which has the horizontal guides). But I still won’t be able to have the font-face.
Thanks for the input!