The "position: relative" didn't work, thanks though.
Here's the HTML:
-------------------------------------------
<div id="wrapper">
<body onload="MM_preloadImages('images/nav/comics2.png','images/nav/games2.png')">
<div id="container-map"><a href="index.html"><img src="images/logo2.png" border="0" class="logo" /></a><img src="images/heros/hero-front.png" border="0" usemap="#Map" class="front" />
<map name="Map" id="Map"><area shape="rect" alt="email us here" coords="225,12,453,30" href="mailto:gerald@bigcitycomix.com" /></map>
<img src="images/heros/hero-back.png" class="back" />
<div class="info-box">
<div align="center">
<table width="695" border="0" cellpadding="10" cellspacing="0">
<tr valign="top">
<td><a href="comix.html" target="_top" onclick="MM_nbGroup('down','group1','Comics','images/nav/comics2.png',1)" onmouseover="MM_nbGroup('over','Comics','images/nav/comics2.png','images/nav/comics2.png',1)" onmouseout="MM_nbGroup('out')"><img src="images/nav/comics1.png" alt="Comics" name="Comics" width="135" height="35" border="0" id="Comics" onload="" /></a></td>
<td><img src="images/nav/map2.png" alt="map to our location" name="map" width="70" height="35" border="0" id="map" onload="" /></td>
<td><a href="games.html" target="_top" onclick="MM_nbGroup('down','group1','games','images/nav/games2.png',1)" onmouseover="MM_nbGroup('over','games','images/nav/games2.png','images/nav/games2.png',1)" onmouseout="MM_nbGroup('out')"><img src="images/nav/games1.png" alt="games & tournament info" name="games" width="401" height="35" border="0" id="games" onload="" /></a></td>
</tr>
<tr valign="top">
<td colspan="3"><div align="center"><iframe width="680" height="400" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=big+city+comix+%2B6414 5&sll=38.905194,-94.607799&sspn=0.008282,0.013797&gl=us&ie=UTF8&hq=big+city+ comix&hnear=Kansas+City,+MO+64145&ll=38.926297,-94.599323&spn=0.066246,0.110378&z=13&iwloc=A&cid=1421737790 2084214564&output=embed"></iframe><br /><small><a href="http://maps.google.com/maps?f=q&source=embed&hl=en&geocode=&q=big+city+comix+%2B64 145&sll=38.905194,-94.607799&sspn=0.008282,0.013797&gl=us&ie=UTF8&hq=big+city+ comix&hnear=Kansas+City,+MO+64145&ll=38.926297,-94.599323&spn=0.066246,0.110378&z=13&iwloc=A&cid=1421737790 2084214564" style="color:#0000FF;text-align:left">View Larger Map</a></small></td>
</tr>
</table>
</div>
</div>
</div>
-------------------------------------------
Here's the CSS:
-------------------------------------------
@charset "utf-8";
/* CSS Document */
body {
font-family:Arial, Helvetica, sans-serif;
margin: 0px;
padding: 0px;
border: 0px;
background-image:url(../images/background/comic-background.jpg);
}
#wrapper {
width: 960px;
margin: 0 auto 0 auto;
position: relative;
}
br.clear {
clear:both;
}
#container {
width: 945px;
height: 600px;
margin: 0 10px 0 10px;
border: 5px solid black;
}
#container-map {
width: 945px;
height: 875px;
margin: 0 10px 0 10px;
border: 5px solid black;
}
.center {
vertical-align: top;
width: 869px;
margin: 0 0 0 0;
}
#hero-back {
position: relative;
z-index: 10;
width: 1024px;
height: 550px;
margin: 40px auto 0px auto;
}
#hero-front {
position: relative;
z-index: 1;
width: 654px;
height: 473px;
margin: 40px auto 0px auto;
}
#front_box {
position:relative;
display:block;
}
img.front {
position: absolute;
top: 200px;
left: 285px;
}
#logo_box {
position:relative;
display: block;
}
img.logo {
position: absolute;
top: 5px;
left: 35px;
}
#back_box {
position:relative;
display: block;
}
img.back {
position: absolute;
top: 115px;
left: 10px;
z-index: -5;
}
.info-box {
background-color:#FFFF00;
width: 700px;
position: absolute;
top: 350px;
left: 135px;
z-index: 50;
border: 5px solid black;
clear: both;
}
#footer {
position: absolute;
left: 10px;
font-family:Arial, Helvetica, sans-serif;
font-size: 9px;
}
-------------------------------------------
...you can see the site at
www.BigCityComix.com
Thanks for your help,
JTN