That is a very poor way to lay out a page, they're not 'positioned correctly' in any browser if the size of the browser window is narrow enough. But for a quick fix:
#Nav {
position : absolute;
left : 50%;
margin-left: -230px;
top : 232px;
width : 461px;
height : 58px;
}
#Frame {
position : absolute;
left : 50%;
margin-left: -230px;
top : 290px;
width : 461px;
height : 247px;
}
The major drawback of which is that now if the window gets narrow enough (less than 460px) the whole thing will still break down. But at least it's a big improvement.
Here's a much better way. I've combined all of the styles into one style section:
<style type="text/css">
<!--
A:Link {color: #273691; text-decoration: none}
A:Visited {color: #273691; text-decoration: none}
A:Hover {color: #aca095; text-decoration: underline}
body {
background: #293a8e url('tilebg.jpg') repeat fixed 50% 45%;
margin: 0;
padding: 0;
}
#container {
background: transparent url(whiteaugust.gif) no-repeat center;
height: 633px;
padding-top: 40px;
}
#Nav {
margin: 0 auto;
padding-top: 195px;
width: 395px;
height : 58px;
}
#Frame {
margin: 0 auto;
width : 461px;
height : 247px;
}
#dropmenudiv{
position : absolute;
border : 1px solid #273691;
border-bottom-width : 0;
font : normal 7.5pt Tahoma, Arial,Helvetica;
line-height : 8pt;
z-index : 100;
}
#dropmenudiv a{
width : 100%;
display : block;
text-indent : 14px;
border-bottom : 1px solid #273691;
padding : 1px 0;
text-decoration : none;
}
#dropmenudiv a:hover{ /*hover background color*/
background-color: #273691;
}
-->
</style>
And here's the markup:
<body>
<div id="container">
<div id="Nav">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td valign="middle">
<script type="text/javascript" src="rollover.js"></script>
<a href="genie.html" target="content"><img src="01_genie_off.jpg" oversrc="01_genie_on.jpg" border="0" alt=""></a>
<a href="#" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu1, '150px')" onMouseout="delayhidemenu()"><img src="02_teas_off.jpg" oversrc="02_teas_on.jpg" border="0" alt=""></a>
<img src="03_products_off.jpg" oversrc="03_products_on.jpg" border="0" alt="">
<img src="04_gifts_off.jpg" oversrc="04_gifts_on.jpg" border="0" alt="">
<img src="05_story_off.jpg" oversrc="05_story_on.jpg" border="0" alt="">
<img src="06_contact_off.jpg" oversrc="06_contact_on.jpg" border="0" alt="">
</td>
</tr>
</table>
</div>
<div id="Frame">
<iframe name="content" frameborder="0" style="border:0px solid white" width=461 height=247 src="welcome.html" scrolling=NO></iframe>
</div>
</div>
</body>