IE9 issues with HTML and CSS - html

Question

I am having an issue with IE9 and I'm assuming 8 and below as well. below is my .CSS. It works perfectly in Chrome, Safari, and FireFox. I am trying to avoid creating a separate .CSS for IE. Sorry this is my first time posting please let me know if you need more information.
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
background-image: url('../images/white_side.jpg');
}
#container {
width: 1280px;
margin: 0 auto;
margin-top: -10px;
align: center;
}
#masthead {
width: 100%;
height: 170px;
background-image: url('../images/header.jpg');
background-repeat: no-repeat;
}
#content {
float: left;
width: 100%;
background-image: url('../images/background.jpg');
background-repeat: no-repeat;
}
#footer {
text-align: center;
clear: both;
width: 100%;
padding-top: 5px;
padding-bottom: 5px;
border-top: 1px solid #a9a9a9;
border-bottom: 1px solid #a9a9a9;
}
#footer p {
color: #DD7500;
margin-top: 5px;
}
#footer a {
color: #DD7500;
text-decoration: underline;
}
#footer a:hover {
color: black;
text-decoration: none;
}
#menu{
float: left;
list-style-type: none;
margin-top: 95px;
margin-left: -40px;
}
#home{
float: left;
list-style-type: none;
}
#post{
float: left;
list-style-type: none;
}
#input{
float: left;
list-style-type: none;
margin-left: 100px;
margin-top: 15px;
}
#search{
width: 210px;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
}
#deals{
float: left;
list-style-type: none;
margin-left: 90px;
}
#login{
float: left;
list-style-type: none;
}
#registrationul{
float: right;
list-style-type: none;
margin-top: -20px;
}
#welcome{
float: left;
list-style-type: none;
}
#register{
float: left;
list-style-type: none;
}
#loginContainer {
position:relative;
float:right;
font-size:12px;
}
#loginButton {
float:right;
position:relative;
z-index:30;
cursor:pointer;
}
#loginButton img {
color: white;
font-size:24px;
background-image:url(../images/login.jpg) no-repeat ;
}
#loginButton:hover {
background-image:url(../images/loginafter.jpg);
}
#loginBox {
position:absolute;
top: 70px;
right: 0px;
display:none;
z-index:29;
}
#loginForm {
width:248px;
-moz-border-radius:3px 0 3px 3px;
margin-top:-1px;
padding:6px;
}
#loginForm fieldset {
margin:0 0 12px 0;
display:block;
border:0;
padding:0;
}
fieldset#body {
background-color: rgba(0,0,0,0.4);
-moz-border-radius:3px;
padding:10px 13px;
margin:0;
}
#body label {
color: white;
margin:9px 0 0 0;
display:block;
float:left;
}
#loginForm #body fieldset label {
display:block;
float:none;
margin:0 0 6px 0;
}
#loginForm input {
width:92%;
border:1px solid #899caa;
border-radius:3px;
-moz-border-radius:10px;
color:#3a454d;
font-weight:bold;
padding:8px 8px;
box-shadow:inset 0px 1px 3px #bbb;
-webkit-box-shadow:inset 0px 1px 3px #bbb;
-moz-box-shadow:inset 0px 1px 3px #bbb;
font-size:12px;
}
#loginForm #login {
width:auto;
float:left;
color:black;
padding:7px 10px 8px 10px;
box-shadow:none;
-moz-box-shadow:none;
-webkit-box-shadow:none;
margin:0 12px 0 0;
cursor:pointer;
padding:7px 2px 8px 2px; /* IE7 Fix */
}
#loginForm span {
background-color: rgba(0,0,0,0.4);
text-align:center;
display:block;
padding:7px 0 4px 0;
}
#loginForm span a {
color:white;
font-size:12px;
}
#rightpannel{
float: right;
margin-top: 20px;
margin-right: 20px;
width: 600px;
height: 350px;
background: rgba(0, 0, 0, 0.5);
}
#bottompannel{
margin-top: 400px;
margin-left: 20px;
width: 1240px;
height: 200px;
background: rgba(0, 0, 0, 0.5);
}
#leftpannel{
float: left;
margin-top: 20px;
margin-left: 20px;
width: 600px;
height: 350px;
background: rgba(0, 0, 0, 0.5);
}

Answer 1

IE's parser is far less error-tolerant that Webkit (Chrome / Safari) or Gecko (Firefox). Run your code through a validation service. There's a good chance, you forgot to close a tag somewhere which is messing with the markup (I speak from personal experience).

Answer 2

You forgot to clear your floats in the navigation menu...
<ul id="registrationul">
<li id="welcome"></li>
<li id="register"><a id="userButton" href="register.php"><img onmouseout="hideIt(this, 'images/register_plain.jpg')" onmouseover="showIt(this, 'images/register_hover.jpg')" id="imageshow6" alt="" src="images/register_plain.jpg"><em></em></a></li>
</ul>
<div style="clear:both;"></div><!-- clears floated elements (in this case ul#menu and ul#registrationul) -->

Answer 3

You will never get IE to attempt to perform like the other far more modern browsers without a doctype. A doctype is required for modern web pages and, without one, you are in quirks mode. Add this as your first line: <!DOCTYPE html>