Firefox vs. IE (SOLVED)

[ennifer_jay]

Type: Paid Account
Layout: ennifer_jay

So I didn't realize that there was a difference in my layout until I used IE earlier today at work.

In firefox, my layout looks like this: here
In IE, my layout looks like this: here (the entries are below the sidebar)

I looked through the tags/tutorials/etc., but nothing seems to work. The one tutorial I used made my sidebar and entries overlap in firefox.

These are my custom CSS codes:

#content{ margin-left: 180px; }

#maincontent{ width: 520px !important; margin-left: auto; -moz-border-radius: 20px; -webkit-border-radius: 20px;}

.subcontent{ margin-top: 20px !important; padding-top: 10px; -moz-border-radius: 20px; -webkit-border-radius: 20px;}

/*the top of the page with navigational links*/

#header {width: 100%;
padding: 0px 0px 0px 210px;
margin: 0px;
text-align: right;
font-family: trebuchet ms;
font-size: 8pt;
font-weight: normal;
letter-spacing: 1px;
text-transform: uppercase;
background-color: ;
border-width: 0px 0px 0px 0px;
border-style: solid;
border-color: ;
color: ;
line-height: 10px;}

#sidebar{ font-size: 11px; float: right; position: relative; background-color: #65230f; padding:7px; padding-right: 0px; margin-left: ; margin-right: -25px; margin-top: -345px; -moz-border-radius: 20px; -webkit-border-radius: 20px;}

.date {
text-align: right;
font-size: 20px;
font-family: "arial";
text-transform: uppercase;
line-height: .5;
}
.subject {
text-align: right;
font-size: 20px;
font-family: "arial";
text-transform: uppercase;
font-weight: normal;
}

.userpic, .userpicfriends{ float: left; text-align:center; padding: 5px; position: absolute; -moz-border-radius: 20px; -webkit-border-radius: 20px; margin-left: -140px;}

.userpic img, .userpicfriends img {padding: 10px}

.userpic img:hover, .userpicfriends img:hover { }

.subject a:hover {color: #a86d1c;}

.subject{ text-align: right; }

.headerimage {
height: 350px;
background-image: url("http://i40.tinypic.com/20j4kuo.png") !important;
background-repeat: no-repeat !important;
background-attachment: scroll !important;
background-position: auto !important;

margin-bottom: 10px;
margin-left: 500px
}

.headerimage {
/* for formatting header image */
position: relative;
width: ; /* Width of banner */
height: ; /* Height of banner */
margin-left: 210px; margin-right: auto;
margin-bottom: -40px; /* Space between bottom of banner and layout */
margin-top: 0px;
background-image: url(http://i40.tinypic.com/20j4kuo.png);
background-repeat: no-repeat;
}

b {
color: #a86d1c;
font-family:trebuchet ms;
font-size:8pt;
text-transform: none;
font-style:none;
}
u {
color: #a86d1c;
font-family:trebuchet ms;
font-size:8pt;
text-transform: none;
font-style:none;
}
i {
color: #a86d1c;
font-family: trebuchet ms;
font-size:8pt;
text-transform: none;
font-style:none;
}

/*targets the currents as a block rather than individually Negative margin to close gap between currents and tags*/
.currents{
margin-top: -25px;
}

Usually I'm pretty HTML savvy. Help?

ETA: I figured it out. Solved!