The layout I am using is a 3-col. layout in a wrapper DIV.
The site shows up in FF, both on MAC an PC, Shows up in Safari, but doesn't show up on IE6. How can I fix this?

here is the CSS:

*{
margin: 0; padding: 0;
}

body {
font-size: 76%;
background-color: #338cca;
font-family: "Lucida Grande", Trebuchet, Verdana, Arial, Helvetica, sans-serif;
}
h1, h2, h3, h4, h5, h6, ul, ol, p {
margin-bottom: 1em;
}

#wrapper{
width: 950px;
margin: 0 auto;
padding-bottom: 25px;
background-color: #c7d2b3;
/*background-color: #373837;*/
/*background-color: #9EA579;*/
/*border: 2px solid red;*/
}
#masthead{

height: 100px;
background-color: #000;
}
#leftCol{
width: 145px;
padding: 20px;
float: left;

}
#rightCol{
width: 145px;
padding: 20px;
float: right;

}
#centerCol{
margin: 20px 185px 100px 185px;

}
#footer{
clear: both;
}

here is the
DocType: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

Here is the HTML:

<body>
<div id="wrapper">

<div id="masthead">
<a href="/index.html"><img src="images/mastlogo_v1.gif" width="377" height="101" alt="Aquatic Science Center" border="0"/></a>
</div>

<div id="mainNav">
<div id="mainNavLinks">
<ul>
<li><a href="index.html">Home</a> </li>
<li> <a href="About.html">About</a> </li>
<li><a href="Meetings.html">Meetings</a> </li>
<li><a href="Links.html">Links</a> </li>
<li><a href="Contact.html">Contact</a></li>
</ul>

</div>
</div>

<div id="leftCol">
<h2>Events</h2>
</div>

<div id="rightCol">
<h2>Stuff</h2>
</div>

<div id="centerCol">
<p>stuff</p>
</div>
<div id="footer">
<p>footer info goes here.</p>
</div>
</body>
</html>