hello I am new with css and have done a sample http://webmx04.freehyperspace2.com/temp/index.html problem is it has different result with ie6 and firefox how do you guys solve this problem in ie7 everything is ok I hope someone could help me

here is my css:

* {
margin:0;
color: #666666;
;
padding-bottom: 0px;
text-decoration: none;
font-size: 11px;
font-family: Arial, Helvetica, sans-serif;
}
body {

background: #fff url(../images/bg.jpg) center top repeat-x; height:768px;
}

#wrapper {
background-image: url(../images/Untitled-1.png);
position: relative;
width: 855px;
height: 768px;
margin: auto;
}

#header {
width: 765px;
height: 88px;
margin-top:22px;
margin-left:49px;
}

#wholebody {
width: 855px;
padding-bottom:20px;
height: 355px;


}


/* ============================= NAVIGATION ============================= */

#menu{
width:750px;
height:22px;
background:url(../images/menu.jpg);
color:#FFFFFF;
font-size:19px;
padding-left:15px;
line-height: 23px;
margin-left: 49px;
}

#menu ul{
margin:0;
padding:0;
list-style:none;
}

#menu ul li{
display:inline;
margin-left:10px;
margin-right:10px;
font-size:10px;
font-family:Arial, Helvetica, sans-serif;
}

#menu ul li a{
color:#666666;
text-decoration:none;
}

#menu ul li a:hover{
color:#ffffff;
text-decoration:none;
}

/* ######### Style for Drop Down Menu ######### */

.dropmenudiv{
position:absolute;
margin:3px 0px 0px -210px;
border-bottom-width: 0;
z-index:100;
visibility: hidden;
color: #1F445F;
font-size:11px;
font-family:Arial, Helvetica, sans-serif;
filter: progid:DXImageTransform.Microsoft.Shadow(color=#CACACA,direction=135,strength=4);
filter:alpha(opacity=70);
-moz-opacity:.70;
opacity:.70;
}

.dropmenudiv ul{
padding:0;
margin:0;
list-style:none;
}

.dropmenudiv ul li{
width:160px;
height:20px;
background: #e9a923;
margin-bottom:1px;
padding-top:1px;
}


.dropmenudiv a{
width: 100%;
display: block;
text-indent: 3px;
text-decoration: none;
color: #666666;
}


.dropmenudiv a:hover{ /*Theme Change here*/
color: #666666;
background-color:#F0F0F0;
width:160px;
height:20px;
display: block;
filter: progid:DXImageTransform.Microsoft.Shadow(color=#CACACA,direction=135,strength=4);
filter:alpha(opacity=70);
-moz-opacity:.70;
opacity:.70;
}


/* ######### Style for flash banner ######### */

#flash{
width:765px;
height:222px;
margin-left:49px;
z-index: 1;
}



/* ######### Style for left Content ######### */

#leftmenu {
width:164px;
height:auto;
margin-left:36px;
float:left;
margin-top: 10px;

}

#leftmenu ul{
margin:0;
padding:0;
list-style:none;
}

/* ######### Style for center Content ######### */

#centercontent {
width:430px;
height:auto;
float:left;
position: relative;
z-index: 10;
top: -20px;

}

/* ######### Style for right Content ######### */

#apDiv1 {
width:162px;
height:275px;
float:right;
margin-right: 54px;
padding-top: 22px;
margin-top: 10px;

}

#apdiv1 .trivia p {font-size: 12px;
font-family:Arial, Helvetica, sans-serif;
text-align:left;
font-weight: normal;
color:#655c5d;
margin:10px 0
}

/* ######### Style for footer ######### */

#footer {
clear: both;
border: none;
text-align: center;
float: left;
margin-left: 190px;
margin-bottom: 29px;
}


My major concern are:
friefox- the drop down menu is way below where I want it to be in ie 7 its fine same with ie 6
the footer is out of line can't get it to move down without it moving in ie7
ie6 total disaster only the header banner and dropdown are right

please teach me how you guys solve this cross browser problems thank you.

thank you for your advice one more thing everytime I resize the browser the dropdown also moves Is there any way of making it stick and not move at all thank you for yourreply appreciate it