Hello!

I have been working on this...trying everything and i'm not sure what's going on. Everything works until I add this table...lines 127-154. Obviously the table is supposed to be centered within the rest of the site. But it's not. It's falling outside of the main container to the right. Also, it's supposed to be white, but it's coming up black. Please help someone! Here's the link to the site!

http://www.kimwiseley.com/cw2/test.html

Here's the stylesheet script im using...

#container { /* this is the holder for the page content */
width: 900px;
border: 1px solid #000000;
background-color:#FFFFFF;
padding: 0px; /* pad the content a little */
margin: 0px auto; /* this centers the container */
text-align:left;
left: 0px;
top: 0px;
}


#footer {
width:900px;
background-color:#FFFFFF;
border-top: 1px thin solid #000000; /* top border of footer */
font-family:"Gill Sans Light", "Gill Sans";
font-size:12px;
color: #999999; /* set the text color to gray */
margin: 0px auto;
}


#body {
margin: 0px auto;
width:900px;
background-color:#FFFFFF;
}


#pdmenu {
padding: 0 0 0 0;
margin: 0px auto;
}

#pdmenu ul {
margin: 0px auto;
padding: 0 0 0 0;
list-style-type: none;
}

#pdmenu li {
width: 150px;
margin: 0px auto;
padding: 0 0 0 0;
color:black;
text-decoration:none;
background-color:white;
float:left;
}

#pdmenu a {
text-decoration: none;
display: block;
color: #000000;
background-color:#FFFFFF;
padding: 0px;
}

#pdmenu a:hover {
border: thin solid #000000;

}

#pdmenu li ul {
display: none;
border: none;
}

#pdmenu li:hover ul {
visibility: visible;
display: block;
position:absolute;
z-index:1;
width:150px;
padding: 0;
margin: 0;
border: none;
}

#pdmenu li li {
border: none;
}

#pdmenu li li a {
padding: 0px 0px 0px 0px;
}

#support {
clear: both;
}

#tables {
border:thin solid #000000;
margin: 0px auto;
}