i got it to work in firefox by creating a large bg, but its messed up in IE.

I thought maybe the margins and padding were interfering, but thats not it. Anyone have an idea.
Here is the code:
I've always been a designer and I just started trying to get better at web design. this seems like something that shouldn't too hard to resolve, but I guess its learning how to remedy mistakes like this that will make me better.
Code:
<body>
<div id="container">
<div id="header">
<img src="http://www.webmaster-talk.com/images/logo.gif" alt="Logo" height="90" width="120" />
<ul id="nav">
<li class="thinkOrange">think <strong>orange </strong></li>
<li> | capabilities | </li>
<li>clients |</li>
<li>creatives | </li>
<li>portfolio | </li>
<li>network | </li>
<li>apparel</li>
<li id="classInfo"> | contact info</li>
</ul>
</div>
<div id="content">
<div id="leftcontent">
<h5>Think different. Think Orange</h5>
<p>
<strong>What is thinking orange</strong><br />
It’s thinking out there, not in here — by design • It’s Packaging • It’s going out and then back • It’s Marketing • It’s Advertising • It’s communicating consciously • It’s
seeing things from a new perspective • It’s Photography • It’s imagining possibilities • It’s Graphic • It’s seizing potential. It’s Branding. It’s opening doors. It’s
Promotion. It’s opening minds. It’s Websites. It’s understanding the center. It’s Logos. It’s dancing with ideas. It’s Creative. It’s saying what needs to be said. It’s Audio.
It’s reading the signs. It’s Print. It’s knowing what your client’s drink. It’s Pittsburgh. It’s Hot. Brilliant. Bold. Bright. Beautifully un-cage-able thinking. And it’s
here.
</p>
</div>
<div id="rightcontent">
<img src="http://www.webmaster-talk.com/images/portfo.png" alt="portfolio" height="502" width="631" />
</div>
<div id="footer">
<p>
©2008 ocreations llc "all right reserved" | 412.481.9478 ext. 502-505
</p>
</div>
</div>
</div>
</body>
Code:
@charset "utf-8";
/* CSS Document */
body{ background: url(images/graybg.gif) 50% 0 #f0f0f2; margin:0; padding:0;}
#bg{background:url(images/graybg.gif) 50% 50% repeat-y; height:501px; width:100%;}
#container{ margin:0; padding:0; width:925px; font-size:small; color:#999999; margin:0 auto; font-family: Tahoma,"Lucida Grande", "Trebuchet MS"}
#header img{ float:left; position: relative; left: 60px;}
/* CSS for horizontal navigation */
#nav{ position:relative; top: 45px; left: 174px; padding:0; width:630px; list-style:none; font-size:90%;}
#nav li{ float:left; margin:0; padding:0;}
.thinkOrange{ color:#f38321;}
#classInfo{ position:relative; left:159px;}
/* CSS for content */
#content{ width:925px; height:502px; clear:both;}
#leftcontent{ float:left; width:264px; height:502px;}
#leftcontent h5{ font-size:105%; padding:0 20px; color:#f38321;}
#leftcontent p {margin:0; padding:0 20px; line-height:1.43em; font-size: 95%;}
#rightcontent{ float:right; width: 631px;}
#rightcontent img{ margin:0; padding:0;}
/* CSS for footer */
#footer {margin: 60px 0 0 0 0;}
#footer p{font-size:80%; clear:both; text-align: center; }
Bookmarks