Pure CSS - Issues

Ok I am designing a site right now by using CSS. jgsenterprises.com/joel/cssdesign/index.html I made a complete website layout in CSS with a header, navigation bar, 2 content areas, and a footer. It took a while to figure out how to do the footer but i got it. It works perfectly in internet explorer 7 but it looks like hell in firefox 2. I cannot figure out how to make them cross compatible without ruining the other. Any help would be greatly appreciated. All of the code you will need is inside of index.html because i did not split it all up into external files yet.

1) Don’t use IE as your primary testing browser

2) You should use a complete doctype (one that includes a URL) to get browsers to render as close to the same as possible. I recommend HTML 4.01 Strict. A doctype is not a magic fix. It is the first step in the process of fixing your page. The doctype tells the browser how to render the page. That HTML 4.01 Transitional doctype which does not include the URL tells the browser to render in Quirks Mode -- a generally bad thing.
Activating the Right Layout Mode Using the Doctype Declaration
Fix Your Site With the Right DOCTYPE!
Choosing a DOCTYPE
Doctype switching
Rendering Mode and Doctype Switching
http://www.w3.org/QA/2002/04/Web-Quality
http://www.w3.org/QA/2002/04/valid-dtd-list.html

3) Don't make a common newbie mistake -- the point of table-less layouts is not to simply replace tables with <div> elements. The point is to use semantically correct markup and then use CSS to make it look the way you want it to.

4) You really should put some text in those <a>s.

I use and recommend the Gilder/Levin Method of CSS Image Replacement which uses an empty span element, because it's the method that's still usable with the images disabled and CSS enabled scenario, which to me is more important than the empty span elements.

I didn't analyze your code very closely because I think Kravvitz has some perfect suggestions.

I am curious what the following block is for:

I'm assuming you can remove those and do something slightly more elegant with CSS... but keep this as an after thought... (might be related to Kravvitz's note #3)

I'd also hold back on testing primarily in IE7 and FF2 right now, the old browsers still dominate the market. I assume you're not that far in your design yet, but do keep that in mind.

That's my two cents

ok i did fix it up quite a bit today and i ended up putting a doctype in there as well. Now it is fully compatible with both internet explorer and firefox. i have one glitch that i can't quite figure out yet and that is where the footer is about 6px to the right of the rest of the layout for some reason. i will probably re-write the footer section completely and see if i can build it right this time.

the div's that say rightarea and left area are the big black areas in the design where all of the content will fit. the sperator is the white bar in between them and due to a glitch, i had to make a lower one as well to save time. thansk for the great links by the way, i didn't get to put them to too much use yet though.