My first css design

I think you'll find people here will be even less impressed at the CSS-ness of your design than they were at Sitepoint as this forum actively promotes tabless design.
I offered you a way to do this without tables on Sitepoint but you haven't indicated whether you've tried to implement those suggestions or not.

Yah i am working on it...I was just wondering if there is anything else i can do to make it better

Well, we can't really comment until you ditch the table-based layout and convert it all to CSS.

Then we can tell you if there's a better way of doing things.

Well then i will be sure to get all the tables out

I just have a few question for you how would you suggest I do the nav in css (the main problem being i dont know how to include top_link_seprator.jpg) and how would you suggest i fix the ie problem i stated above?

The navigation will be a styled list, have a read of the alistapart article entitled "sliding doors of CSS" to get a great explanation.

The IE issue is due to IE's supporting of :hover ONLY on link elements <a>. But to be honest, it's not worth the hassle. If they ARE links, then it will work in IE.

If they're NOT links, then screw IE and let decent browsers display the visual niceties.

I don't get what you mean I tried making one of them a link and it still did not work.

This is my first attempt at a no table layout
http://movie-gurus.com/1/4/
and in ff it looks fine but in ie it has moved over to the right and i cant seem to figure out why.

I read "sliding doors of CSS" which it helps a lot I just have one more question how would I do just a plain hover in css like how would it look in the xhtml and how would it look in css.

Thanks again

Ditch the absolute positioning immediately.

What should I use then? And whats so bad about using absolute positioning?

http://www.csscreator.com/css-forum/ftopic13756.html

While you're at it, you might want to read this as well:

http://www.csscreator.com/css-forum/ftopic19126.html

I actually tentatively advised this poster to use absolute positioning for certain elements for this layout in a thread on another forum, but that was for HTML that was substantially different.

The background image at http://movie-gurus.com/forum/style_images/mgdefault/images/bg2.jpg and the black border around the main table is a bit of an oddity.

Ok if absolute positioning is something a newb to css should not use then how do I make my header?

I already gave you a suggestion in the Sitepoint thread which you seem to have completely ignored.

/* image replacement */
 .IR { 
 	position: relative;
 	overflow: hidden;
 	font-size: 1em;
 }
 		
 .IR em {
 	display: block;
 	position: absolute;
 	top: 0; left: 0;
 	z-index: 1;
 }
 
 #header {
 	position: relative;
 	background: url(stripeybackground.gif) repeat-x;
 }
 
 h1, h1 em { 
 	width: XXXpx; 
 	height: XXpx; 
 	background: url(moviegurus.gif) no-repeat;
 }
 
 h2, h2 em { 
 	width: XXXpx; 
 	height: XXpx; 
 	background: url(truthaboutmovies.gif) no-repeat;
 }
 
 img#monk { 
 	position: absolute; z-index: 2;
 	top: XXpx;
 	left: XXpx;
 }
 
 ul#topnav {
 	position: absolute; z-index: 1;
 	top: 0; left: 0;
 	width: 100%;
 	height: XX;
 }
 
 ul#topnav li {
 	display: inline;
 	width: 3em;
 	border-right: 1px solid #000;
 }
 
 p#topquote {
 	position: absolute;
 	top: XX; left: 0;
 	width: 100%;
 	text-align: center;
 }
 
 <div id="header">
 	<h1 class="IR">Movie Gurus</h1>
 	<h2 class="IR">The truth about movies</h2>
 	<img id="monk" src="monk" />
 	<ul id="topnav">
 	  <li>Home</li>
 	  <li>Review</li>
 	  <li>Features</li>
 	  <li>Community</li>
 	  <li>Contact</li>
 	</ul>
 	<p id="topquote">"Random Quote...Random Quote...Random Quote...Random Quote...Random Quote..." - Random Quote</p>
 </div>

Doing it this way would require some position: absolute. Doing it this way:

<div id="header">
 	<ul id="topnav">
 	  <li>Home</li>
 	  <li>Review</li>
 	  <li>Features</li>
 	  <li>Community</li>
 	  <li>Contact</li>
 	</ul>
 	<p id="topquote">"Random Quote...Random Quote...Random Quote...Random Quote...Random Quote..." - Random Quote</p>
 	<h1 class="IR">Movie Gurus</h1>
 	<h2 class="IR">The truth about movies</h2>
 	<img id="monk" src="monk" />
 </div>

may be easier to pull off as it wouldn't require as many elements to be positioned absolutely.

I was never able to get that to work and i am sorry if it seemed like I ignored it

Well I can tell you that from a semantic HTML point of view, what I've offered so far is about as good as you're going to get (ie I doubt others on this board will come up with anything very different) so rather than asking "how do I make my header" you should be asking for advice on how to get what you've been offered so far to work and explaining why it hasn't worked for you so far.

Alright then

I took the code you gave me and put it here http://movie-gurus.com/1/5/ as you can see everything kind of layers on top of each other. I don't get how I can movie them and not use absolute positioning.

Give this a go:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>...</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style>
* { margin: 0; padding: 0; }

body { font: 70%/150% Verdana, Arial, sans-serif; }

/* image replacement */
 .IR {
    position: relative;
    overflow: hidden;
    font-size: 1em;
 }
       
 .IR em {
    display: block;
    position: absolute;
    top: 0; left: 0;
    z-index: 1;
 }
 
 #header {
    position: relative;
    background: url(http://movie-gurus.com/1/5/images/header-1.gif) repeat-x 0 2.7em;
	overflow: hidden;
	min-height: 160px;
 }
 
* html #header { height: 160px; }
 
h1, h2 { float: left; display: inline; }

h1 { margin: 0.5em 0 0 20em; }
h2 { margin-left: 8em; }
 
 h1, h1 em {
    width: 239px;
    height: 97px;
    background: url(http://movie-gurus.com/1/5/images/header-3.gif) no-repeat;
 }
  
 h2, h2 em {
    width: 332px;
    height: 94px;
    background: url(http://movie-gurus.com/1/5/images/header-4.gif) no-repeat;
 }
 
 img#monk {
    position: absolute; z-index: 2;
    top: 0;
    left: 20px;
 }
 
 ul#topnav {
    height: 2em;
	padding-top: 0.5em;
	background: #990000;
	color: #FFF;
	text-align: center;
 }
 
 ul#topnav li {
    display: inline;
    width: 3em;
	margin-right: 3em;
	padding-right: 3em;
    border-right: 1px solid #000;
 }
 
 p#topquote {
    text-align: center;
	background: #FFE9B8;
	border-bottom: 1px solid #000;
	font-weight: bold;
	color: #990000;
 }
 .clearer { clear: both; }
 </style>
</head>
<body>
<div id="header">
    <ul id="topnav">
      <li>Home</li>
      <li>Review</li>
      <li>Features</li>
      <li>Community</li>
      <li>Contact</li>
    </ul>
    <p id="topquote">"Random Quote...Random Quote...Random Quote...Random Quote...Random Quote..." - Random Quote</p>
    <h1 class="IR"><em></em>Movie Gurus</h1>
    <h2 class="IR"><em></em>The truth about movies</h2>
    <img id="monk" src="http://movie-gurus.com/1/5/images/header-2.gif" />
	<div class="clearer"></div>
 </div> 
 </body>
 </html>

Just one thing to note: with this image replacement method, your images can't have any transparent areas or the text shows through from behind.

http://movie-gurus.com/1/4/ it works a lot better but 2 things movie gurus is not over far enough and you can see the text should i get rid of those?

Also how did you fix it...i am still a little confused about the whole thing.

Finally how would I make the nav hover work?

You can adjust the horizontal position of 'movie gurus' with the left margin on the h1 (currently 20em). The text shows through from behind because you've got transparent areas in your GIF (as mentioned above). You need to re-export the graphic with no transparency.
Not sure what you mean by how to get the nav hover to work. You haven't made any of those links.