Site won't display in Explorer.....plz help!

This is a page from my site created in dreamweaver CS4 and it won't display anything in IE v 8.0.6.xxx
Here is the code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd[/URL]">
<html xmlns="[url=http://www.w3.org/1999/xhtml]XHTML namespace[/url]">
<head>
<link rel="stylesheet" type="text/css" href="js/style.css" />  
<script type="text/javascript" src="js/jquery.js"></script>  
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>  
<script type="text/javascript" src="js/sprite.js"></script> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
 font: 100% Verdana, Arial, Helvetica, sans-serif;
 background: #000000;
 margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
 padding: 0;
 text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
 color: #000000;
}
.oneColLiqCtrHdr #container {
 width: 72%;  /* this will create a container 80% of the browser width */
 background: #000000;
 margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
 border: 1px solid #000000;
 text-align: left; /* this overrides the text-align: center on the body element. */
}
.oneColLiqCtrHdr #header {
 /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
 background-image: url(images/header.jpg);
 background-repeat: no-repeat;
 height: 241px;
 background-color: #000000;
}
.oneColLiqCtrHdr #header h1 {
  /* using padding instead of margin will allow you to keep the element away from the edges of the div */
}
.oneColLiqCtrHdr #mainContent {
 /* remember that padding is the space inside the div box and margin is the space outside the div box */
 background: #000000;
 color: #FFF;
}
.oneColLiqCtrHdr #footer { 
 padding: 0 10px; /* this padding matches the left alignment of the elements in the divs that appear above it. */
 background:#000000;
} 
.oneColLiqCtrHdr #footer p {
 margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
 padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
 color: #FFF;
}

#apDiv1 {
 position:absolute;
 left:381px;
 top:103px;
 width:671px;
 height:53px;
 z-index:1;
}
#apDiv2 {
 position:absolute;
 left:173px;
 top:188px;
 width:900px;
 height:86px;
 z-index:2;
 background-image: url(images/images/contenthome_1.jpg);
 background-repeat: no-repeat;
}
#apDiv3 {
 position:absolute;
 left:173px;
 top:274px;
 width:665.5px;
 height:383px;
 z-index:1;
 background-image: url(images/images/contenthome_2.jpg);
 background-repeat: repeat-y;
}
#apDiv4 {
 position:absolute;
 left:882px;
 top:274px;
 width:6px;
 height:370px;
 z-index:1;
 background-image: url(images/images/contenthome_3.jpg);
 background-repeat: repeat-y;
}
#apDiv5 {
 position:absolute;
 left:841px;
 top:274px;
 width:16px;
 height:369px;
 z-index:1;
 background-image: url(images/images/contenthome_3.jpg);
 background-repeat: no-repeat;
}
#apDiv6 {
 position:absolute;
 left:856px;
 top:274px;
 width:206px;
 height:405px;
 z-index:1;
 background-image: url(images/images/contenthome_4.jpg);
 background-repeat: repeat-y;
}
#apDiv7 {
 position:absolute;
 left:1062px;
 top:274px;
 width:11px;
 height:387px;
 z-index:1;
 background-image: url(images/images/contenthome_5.jpg);
 background-repeat:repeat-y;
}
#bottom {
 position:absolute;
 left:173px;
 width: 900px;
 height: 94px;
 top:655px;
 z-index:1;
 background-image: url(images/images/contenthome_6.jpg);
 background-repeat: no-repeat;
}
 
</style></head>
<body class="oneColLiqCtrHdr">
d
<div id="container">
  <div id="header">
    
  </div>
  <div id="apDiv1">
  <ul id="navigation">  
    <li ><a class="home" href="#"></a></li>  
    <li ><a class="aboutus" href="#"></a></li>
    
    <li ><a class="holdinganevent" href="#"></a></li>  
    <li ><a class="events" href="#"></a></li>  
    <li ><a class="contactus" href="#"></a></li>  
</ul>  
  </div>
  <div id="mainContent">
  <div id= "apDiv2"> </div>
  <div id= "apDiv3">
    <td><tr>asdfasdfasdfasddddddddddddddd</tr></td>
  </div>
 <div id="apDiv5"></div>
<div id="apDiv6">sdf</div>
<div id="apDiv7"> </div>
  <div id="bottom"></div>

  <h1> </h1>
    <h1> </h1>
     <!-- end #mainContent --></div>
  <div id="footer">
    <!-- end #footer -->
  </div>
<!-- end #container --></div>
</body>
</html>

Here is a seperate CSS attached for the navigation:


#navigation   
{   
position: absolute;   
}   
  
#navigation li   
{   
float:left;   
}  
#navigation li a   
{
 background-image:url(../navegation.jpg);
 display:block;
}  
.home   
{   
background-position:0px 0px;   
width:125px;   
height:45px;   
}   
  
.aboutus   
{   
background-position:-125px 0px;   
width:124px;   
height:45px  
}   
  
.holdinganevent  
{   
background-position:-249px 0px;   
width:131px;   
height:45px  
}   
  
.events  
{   
background-position:-380px 0px;   
width:115px;   
height:45px  
}   
  
  
.contactus  
{   
background-position:-496px 0px;   
width:126px;   
height:45px  
}  
 #navigation a .hover {
 background: transparent  url(../navegation.jpg) no-repeat;
 display:block ;
 opacity: 0;
 position: relative;
 top: 0;
 left: 0;
 height: 100%;
 width: 100%;
 
 }
 
 #navigation .home .hover {
 background-position: -0px -52px;
 
 }
 #navigation .aboutus .hover{
 background-position: -125px -52px;
 
 }
 #navigation .holdinganevent .hover {
 background-position: -249px -52px;
 }
 #navigation .events .hover {
 background-position: -380px -52px;
 }
 #navigation .contactus .hover {
 background-position: -496px -52px;
 }

I don't know what else to try so any help is welcome

Thanks in advance!