I need help making my page look right in IE Options

[Neighborhood B]

I just finished my overlay and it looks perfect in Firefox but it looks ridiculously screwed up in IE. Im not exactly sure of what changes I need to make in my CSS so can someone guide me?

here is my page...those of you with IE can see what im talking about...you can still see existing parts of the default layout...my pic and friend space is all the way to the bottom...the bounding box on the flash player seems to extend further than the rest of them. In Firefox everything is exactly where I want it.

myspace.com/thisiswhatido

<!-- begin code provided by createblog.com --><br /><style type="text/css"><br />.main{<br />position:absolute;<br />left:50%;<br />top:150px;<br />width:800px;<br />z-index:1;<br />margin-left:-400px;<br />}<br /><br />    .navigation{<br />    border-bottom:1px solid;<br />    border:1px solid;<br />    }<br /><br />    .navigation li{<br />    display:inline;<br />    list-style-type:none;<br />    padding:0 20px 0 0;<br />    }<br /><br />    .navigation a:link, .navigation a:visited{<br />    font-family:arial;<br />    color:6495ED;<br />    font-size:11px;<br />    padding:3px;<br />    }<br /><br />    .navigation a:hover{<br />    text-decoration:none;<br />    padding:3px;<br />    color:FFFFFF;<br />    }<br /><br />    .friendtitle a:link, .friendtitle a:visited{<br />    font-family:arial;<br />    color:6495ED;<br />    font-size:11px;<br />    }<br /><br />    .friendtitle a:hover{<br />    text-decoration:none;<br />    padding:3px;<br />    color:FFFFFF;<br />    }<br /><br />    .content{<br />    width:525px;<br />    float:left;<br />    padding:5px 5px 5px 7px;<br />    margin:5px 5px 0 0;<br />    border:1px solid;<br />    }<br /><br />    .picture{<br />    right:0%;<br />    position:absolute;<br />    <br />    <br />    }<br /><br />    .picture a:link, .picture a:visited{<br />    color:FFFFFF;<br />    border:3px;<br />    }<br /><br />    .sidebar{<br />    float:right;<br /><br />    }<br /><br />    .friendpicture{<br />    right:1%;<br />    position:absolute;<br />    margin-top:200px;<br />    }<br /><br />img{<br />border:0;<br />filter:alpha(opacity=80); <br />-moz-opacity: 0.80; <br />opacity: 0.80;<br />}<br />    img:hover{<br />    filter:alpha(opacity=95); <br />    -moz-opacity: 0.95; <br />    opacity: 0.95;<br />     }<br /><br />    .title{<br />    font-family:arial;<br />    color:6495ED;<br />    text-align:right;<br />    font-size:11px;<br />    font-weight:bold;<br />    }<br /><br />    .friendtitle{<br />    font-family:arial;<br />    color:6495ED;<br />    text-align:center;<br />    font-size:11px;<br />    font-weight:bold;<br />    }<br /><br />    <br />    .theater{<br />    width:320px;<br />    float:right;<br />    padding:5px 5px 5px 7px;<br />    margin:5px 5px 0 0;<br />    border:1px solid;<br />    }<br /><br />    body {<br />    background-color:3A5FCD;<br />    background-attachment:scroll;<br />    }<br /><br />    table td div {background-color:3A5FCD;}<br /><br /><br />    input{<br />    color:6495ED;<br />    background-color:104E8B;<br />    border:1px solid;<br />    border-color::d6d3d3;<br />    margin-left:6px;<br />    margin-top:4px;<br />    }<br /><br />    input:hover{<br />    color:555555;<br />    background-color:6495ED;<br />    border:1px solid;<br />    border-color::555555;<br />    }<br /><br />    input:focus{<br />    color:555555;<br />    border:1px solid;<br />    bord-color:555555;<br />    }<br /></style><br /><!-- end code provided by createblog.com -->

[Jane Doe.]

Well, this may not be helpful, because I have not had much experience using this property, but:

The padding and margin property..? Yeah, I see you use it as:
padding:5px 5px 5px 7px;
margin:5px 5px 0 0;

I don't know.. how about using it as one of the following:
padding-bottom
padding-left
padding-right
padding-top

and:
margin-bottom
margin-left
margin-right
margin-top

I'm just looking at this in w3schools and would think that might be causing the problem ..