site breaks when zooming

need help!

[jynx]

i am working on a website for the greek senate at school, and i am using absolute positioning, however when I zoom in or out the site "breaks". any ideas how to fix it?

<snip>

I can post the source is necessary

[edited by: swa66 at 12:22 pm (utc) on April 1, 2009]
[edit reason] No personal URLs allowed please see ToS [/edit]

[jynx]

CSS

#top {
position: absolute; 
top: 0px; 
left: 0px;
width: 100%;
height: 30px;
margin-left: auto;
text-align: center;
background: #000;
color: #8f8f8f;
font: bold 0.8em/1.4 "Palatino Linotype", "lucida grande", tahoma, verdana, arial, sans-serif;
min-width: 750px;
}
#bar {
position: absolute; 
top: 30px; 
left: 0px;
width: 100%;
background-image: url('bgBar.png');
background-repeat: repeat-x;
background-color: #000;
height: 100px;
margin-left: auto;
text-align: center;
min-width: 750px;
}
#black {
position: absolute;
background-color: #000;
height: 100px;
top: 130px; 
left: 0px;
width: 100%;
min-width: 750px;
}
#navBG {
position: absolute;
top: 130px; 
left: 0px;
width: 100%;
min-width: 750px;
height: 35px;
background-image: url('linkBG.png');
background-repeat: repeat-x;
text-align: center;
z-index: 100;
}
#flash {
position: absolute;
top: 130px;
}
#page {
position: absolute;
top: 165px;
left: 50%;
height: 100%;
width: 70%;
min-width: 750px;
margin-left: -35%;
/*margin-left: auto;
margin-right: auto;*/
border: 0px solid #ff9933;
background: #FFCC99 url('shadow.png') 0 0 repeat-x; 
}
#footer {
  position: absolute;
  bottom: 0;
/*background: #000;*/
width: 100%;
height: 100px;
background: url('footerBG.png') bottom left repeat-x;
}
html,body { margin:0; 
padding:0; 
overflow:hidden;
background: #FFFFCC;
/*background-image: url('paper2.jpg');*/
}
.centerImg {
display: block;
margin-left: auto;
margin-right: auto 
}
ul#nav {
 margin-left: 28%;
padding-top: 5px;
text-align: center;
 border: 0;
 padding: 10;
 width: 100%; /*For KHTML*/
 list-style: none;
 height: 35px;
}
 ul#nav li {
 margin: 0;
 border: 0;
 padding: 10;
 float: left; /*For Gecko*/
 display: inline;
 list-style: none;
 position: relative;
 height: 24px;
}
 ul#nav ul {
 margin: 0;
 border: 0;
 padding: 10;
 width: 160px;
 list-style: none;
 display: none;
 position: absolute;
 top: 24px;
 left: 0;
}
 ul#nav ul:after /*From IE 7 lack of compliance*/{
 clear: both;
 display: block;
 font: 1px/0px serif;
 content: ".";
 height: 0;
 visibility: hidden;
}
 ul#nav ul li {
 width: 160px;
 float: left; /*For IE 7 lack of compliance*/
 display: block !important;
 display: inline; /*For IE*/
}
/* Base Menu */
ul#nav a {
 /*border: 1px solid #FFF;*/
 border-right-color: #CCC;
 border-bottom-color: #fff;
 padding: 0 6px;
 float: none !important; /*For Opera*/
 float: left; /*For IE*/
 display: block;
 color: #FFCC66;
 font: bold 0.8em/1.4 arial, verdana, tahoma, sans-serif;
 text-decoration: none;
 height: auto !important;
 height: 1%; /*For IE*/
}
/* Base Menu Hover */
ul#nav a:hover,
ul#nav li:hover a,
ul#nav li.iehover a {
 /*background: #ff9933;*/
 color: #000;
}
/* Second Menu */
ul#nav li:hover li a,
 ul#nav li.iehover li a {
 float: none;
 background: #EEE;
 color: #686868;
}
/* Second Menu Hover */
 ul#nav li:hover li a:hover,
 ul#nav li:hover li:hover a,
 ul#nav li.iehover li a:hover,
 ul#nav li.iehover li.iehover a {
  background: #A8A8A8;
 color: #D9D9D9;
}
/* Third Menu */
 ul#nav li:hover li:hover li a,
 ul#nav li.iehover li.iehover li a {
  background: #EEE;
 color: #686868;
}
/* Third Menu Hover */
 ul#nav li:hover li:hover li a:hover,
 ul#nav li:hover li:hover li:hover a,
 ul#nav li.iehover li.iehover li a:hover,
 ul#nav li.iehover li.iehover li.iehover a {
  background: #CCC;
 color: #D9D9D9;
}
/* Fourth Menu */
 ul#nav li:hover li:hover li:hover li a,
 ul#nav li.iehover li.iehover li.iehover li a {
  background: #EEE;
 color: #D9D9D9;
}
/* Fourth Menu Hover */
 ul#nav li:hover li:hover li:hover li a:hover,
 ul#nav li.iehover li.iehover li.iehover li a:hover {
  background: #CCC;
 color: #D9D9D9;
}
 ul#nav ul ul,
ul#nav ul ul ul {
 display: none;
 position: absolute;
 top: 0;
 left: 160px;
}
/* PERMANENET */
 ul#nav li:hover ul ul,
 ul#nav li:hover ul ul ul,
 ul#nav li.iehover ul ul,
 ul#nav li.iehover ul ul ul {
  display: none;
}
  ul#nav li:hover ul,
 ul#nav ul li:hover ul,
  ul#nav ul ul li:hover ul,
 ul#nav li.iehover ul,
 ul#nav ul li.iehover ul,
 ul#nav ul ul li.iehover ul {
 display: block;
}

[jynx]

HTML

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="swfobject.js">swfobject.registerObject("myId", "9.0.0", "expressInstall.swf"); </script>
<title>William Paterson University - Greek Senate</title>
</head>
<body>
<div id="top">William Paterson University</div>
<div id="bar"><img src="logo.png" class="centerImg" /></div>
<div id="black"></div>
<div id="navBG">
    <ul id="nav"> 
<li><a href="#">Home</a> 
</li>
<li><a href="#">Our Mission</a>
</li>
<li><a href="#">History</a>
</li>
<li><a href="#">Meetings</a>
</li>
<li><a href="#">Constitution</a> 
</li>
<li><a href="#">Councils</a> 
<ul> 
<li><a href="#">IFC</a></li> 
<li><a href="#">NPC</a></li>
<li><a href="#">NPHC</a></li>
<li><a href="#">UCGC</a></li>
</ul> 
</li>
<li><a href="#">Unity</a>
</li>
<li><a href="#">Officers</a>
</li>
<li><a href="#">Officers</a>
</li>
 
</ul> 
  </div> <!-- END nav --></div>
<div id="page"></div>
<div id="footer"><img src="logoBT.png" class="centerImg" /></div>
</body>
</html>