IE vs. Firefox

[ennifer_jay]

Hi, another post! Sorry :(

Normally I can get this to work, but for some reason this isn't cooperating. I think it's because I'm going from a topbar back to a sidebar in this layout, so I'm a bit rusty.

#content{ width: 915px; margin-left: auto; margin-right: auto; background-color: transparent; border-color: transparent; }

#maincontent{ width: 498px !important; margin-left: 49px; margin-right: 0px; margin-top: 28px; }

.subcontent{ width: 498px; margin-top: 0px !important; margin-left: 0px; margin-right: auto; padding-top: 0px; }

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

#header {width: 100%;
padding: 0px 0px 0px 0px;
margin: 0px;
text-align: center;
font-family: arial;
font-size: 7pt;
font-weight: normal;
font-color: ;
letter-spacing: 1px;
text-transform: uppercase;
background-color: transparent ;
border-width: 0px 0px 0px 0px;
border-style: 1px solid;
border-color: #000000;
color: ;
line-height: 10px;}

#sidebar {
padding-top: 5px;
padding-bottom: 10px;
margin-left: -280px;
margin-right: auto;
margin-top: -150px;
margin-bottom: 0px;
background-color: #BD8890;
font-size: 8pt;
font-family: "trebuchet ms";
color: #000000;
border-color: transparent;
width: 300px;
height: auto;
float: left;
text-align: left;
}

li.sbartitle {
font-family: "arial";
font-size: 7pt;
font-weight: bold;
text-transform: uppercase;
text-align: right;
padding: 5px;
}

#footer {
margin-left: 49px;
width: 498px;
}

.date {
text-align: right;
font-size: 20px;
font-family: "georgia";
font-style: italic;
text-transform: lowercase;
margin-bottom: -13px;
}

.subject {
text-align: right;
font-size: 14px;
font-family: "trebuchet ms";
text-transform: uppercase;
font-weight: normal;
}

.subject a:link, a:active, a:visited {color: #000000; font-size: 14px;}
.subject a:hover {color: #eeeeee; font-size: 14px;}

.userpic, .userpicfriends{
float: right;
text-align:center;
padding: 5px;
position: absolute;
margin-right: 80px;
margin-left: 510px;}

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

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

.headerimage {
height: 500px;
background-image: url("http://i40.tinypic.com/f23n2r.png") !important;
background-repeat: no-repeat !important;
background-attachment: scroll !important;
background-position: center !important;
margin-bottom: 75px;
margin-left: 350px;
margin-right: auto;
}

.headerimage {
/* for formatting header image */
position: center;
width: 500px; /* Width of banner */
height: 400px; /* Height of banner */
margin-left: 350px; margin-right: auto;
margin-bottom: -60px; /* Space between bottom of banner and layout */
margin-top: 0px;
background-image: url(http://i40.tinypic.com/f23n2r.png);
background-repeat: no-repeat;
}

.entry {
margin-left: auto;
margin-right: auto;
}

.entry_text {
margin-bottom: 10px;
}

.entry_text img { max-width:500px;}

.title, .subtitle {
display: none;
}

b {
color: #eeeeee;
font-family: trebuchet ms;
font-size:8pt;
text-transform: none;
font-style:none;
}
u {
color: #eeeeee;
font-family: trebuchet ms;
font-size:8pt;
text-transform: none;
font-style:none;
}
i {
color: #eeeeee;
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: -30px;
background-color: #8A515A;
padding: 5px 5px 5px 5px;
}

.b-repost-item {display:none}

.currents {
width: auto;
padding: 5px 5px 5px 5px;
color: #eeeeee;
}

.ljtags {
color: #eeeeee;
margin-top: 10px;
margin-bottom: -10px;
padding: 5px;
background-color: #8A515A;
}

a:link, a:visited, a:active, a:hover {
font-family: arial;
font-size: 7pt;
text-transform: uppercase;
color: #000000;
}

It's showing up wonky on IE (And apparently chrome, too, but I don't have that browser on my computer).

-The userpics for each entry are really far away in IE. For some reason it wouldn't let me float them to the right no matter what I did - and everything is right aligned, including the drop down box selection in presentation. It would show up on the entry, but when I tried to push them to the right they would disappear rather than start showing up on the other side of the entry. When I placed it as position: absolute and fiddled with the margin-left property was only when it would let me float them to the right. So while it looks good in Firefox, they're really far away in IE.

-My sidebar and entries move whenever I expand or decrease the width of my IE browser. (This is hard to explain, you have to open up IE yourself to see what I mean). Based on a screen cap my friend sent me of her Chrome browser, it looks like it might be doing the same there.

Sorry for this, and eternally grateful for your help! I feel like my codes got all mixed up when I switched from topbar back to sidebar.