curtisblackwellThe site I'm working on looks correct in webkit based browsers (Safari, Chrome, etc.) but the header is one pixel to the right in Firefox.
Header:
<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>The page-wrap div closes in the footer.php file just before it gets the footer. I tried taking the header out of the page-wrap to no avail. The images are all the correct widths, I've made sure several times.
CSS:
/*
STRUCTURE
*/
#page-wrap {
height: auto !important;
height: 100%;
margin: 0pt auto -37px;
min-height: 100%;
width: 980px;
}
#push { height: 37px; }
/*
HEADER
*/
img#header {
margin: 0pt auto;
width: 980px;
}
img#navbar {
margin: 0pt auto;
width: 980px;
}The HTML is valid, and for some reason the CSS validator can't find the CSS file, even though when I click the link to where the file is supposed to be (and is) generated by the validator, it opens it up.
thisisedie