on any page that scrolling is possible, the whole pages moves over a bit and the header gets off. i think this is only happening in firefox. webkit browsers look fine.
CSS
body {
background: url(/images/bg.png) top center repeat-y #898989;
color: #000000;
font-family: Arial, sans-serif;
font-size: 16px;
}
/*
STRUCTURE
*/
#page-wrap {
height: auto !important;
height: 100%;
margin: 0pt auto -37px;
min-height: 100%;
width: 980px;
}
#push { height: 37px; }
HTML
<body>
<div id="page-wrap">
<a href="http://stpaulsfmc.com/"><img id="header" alt="Saint Paul's Free Methodist Church" src="/images/header.png" width="980" height="84" /></a>
<img id="navbar" alt="navigation bar" src="/images/navbar.png" width="980" height="51" usemap="#nav" />
<map id="nav" name="nav">
<area alt="about us" coords="367, 8, 452, 28" href="/about-us/" shape="rect" />
<area alt="events" coords="475, 8, 540, 28" href="/events/" shape="rect" />
<area alt="ministries" coords="563, 8, 650, 28" href="/ministries/" shape="rect" />
<area alt="resources" coords="673, 8 , 765, 28" href="/resources/" shape="rect" />
</map>