[dtws]

As usual, site looks great in Firefox, but my nav bar is not in the right place when viewed in IE. It should be over on the left but IE puts it to the right.

At first it seemed to be the double-margin problem, but after making some changes that does not seem to be it. I tried adding the "display: inline" but it didn't help so I took it out.

CSS is w3c validated.

Here is the site URL: http://www.socialsomething.com/teammi/
And two screenshots in case you don't feel like looking yourself:
Firefox: http://images.x7web.com/files/zduouwyk19kp31lg7r03.gif
IE: http://images.x7web.com/files/mnyy3ys7q9uvvcpon0bl.gif

Here is my CSS code:

html { 
font: .8em Helvetica, Arial, Tahoma, Verdana, sans-serif;
background-color: #ffffff; 
color: #000; 
margin: 0 auto;
} 
body { 
margin: auto;
padding: 0;
text-align: center;
width: 888px;
background-color: #ffffff;
}
h1 {
  font-size: 1.3em;
  font-weight: bold;
  color: #01356E;
}
a:link {
color: #01356E;
}
a:visited {
color: #0070B6;
}
a:hover {
color: #CC3433;
}
#container {
width: 888px;
margin: 0 auto;
text-align: left;
}
#header {
width: 888px;
}
#header-search {
width: 320px;
margin: 0px;
padding: 0px;
right: 0px;
}
#header-ads {
float: right;
width: 450px;
padding: 0px;
}
#main {
position:relative;
width: 150px
}
#main-1 {
position:absolute;
top:140px;
left:400px;
width:600px;
}
#content {
position:relative;
width: 150px;
text-align: left;
}
#content-1 {
position:absolute;
top:140px;
left:400px;
width:600px;
text-align: left;
}

#nav {
background-repeat: no-repeat;
}
#wholepage {
float: left;
width: 888px;
padding: 12px;
}
#navleft {
float: left;
}
#right {
float: left;
width: 35%;
margin-left: 12px;
} 
#copyright {
padding: 0 3px 0 3px; 
width: 764px; 
clear: both; 
text-align: center; 
margin: 0 6px 0 6px;
}
#email_friend {
font-size: .9em;
font-weight: bold;
}

Thanks for helping out. If you need any other information or code let me know. If this isn't an easy fix, I am willing to pay a bit for a solution.