I immediately let out a groan when I saw the size of the download – one that was confirmed when loading the page. Here’s a tip, I don’t care how pretty that road is, it’s not worth twice the upper limit in kb I’d even allow an entire page on a site to reach!!!
Paul is quite correct in it needing a rewrite that actually follows the structural rules of HTML – but really he didn’t throw away NEARLY enough of the pointless/worthless bloat. He said the CSS is overcooked – as I always say CSS is only as good as the HTML it’s applied to, which is why IMHO that HTML needs a good hefty pruning. Scary when I’m predicting a 25-33% reduction in code on something that’s only 2.21k to start with – but it’s indicative of the “not every ejaculation deserves a name” scenario, where you not only have divitus (wrapping div around everything for no good reason), but classes/ID’s on everything too.
Though I’m hard pressed to say what the page should even look like, given I’m seeing four different layouts in four different browsers. I’m going to assume the one in FF is what you are aiming for. (you certainly wouldn’t be trying to do what IE and Opera are doing to it here).
So first, let’s clean up the markup. It’s got a NASTY case of “not every ejaculation deserves a name” with all the extra DIV for nothing… the inlined dividers aren’t necessary and are non-semantic in their inclusion… Of course google’s font api is cute, I’d suggest ripping it out for REAL webfonts. (Font squirrel being the best of the lot)
For what you are doing, there is little reason for your HTML so far to be much more than:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
Asotin County Community Services
<span>Community <span>Services</span></span><br />
HELPING Individuals with LEARNING DISABILITIES<br/>
SUCCEED in school, life & work
<li><a href="#">programs & services</a></li>
<li><a href="#">photo gallery</a></li>
<li><a href="#">about us</a></li>
<li class="last"><a href="#" >contact us</a></li>
<li class="about"><a href="#">about us</a></li>
<a href="#">programs & services</a>
<li><a href="#">Supported Living</a></li>
<li><a href="#">Employment Services</a></li>
<li><a href="#">Prevention & Treatment Services</a></li>
<li><a href="#">Birth to Three Program</a></li>
<li class="photo"><a href="#">photo gallery</a></li>
<li class="contact"><a href="#">contact us</a></li>
<!-- #pageWrapper --></div>
With EVERYTHING else you are trying to do there easily enough handled from inside the CSS.
If I have time later and senility doesn’t strike, I’ll belt out the CSS that would make that work.
Oh, can I assume there will be actual content on said page, and not just one heading and lists? “As is” that’s treading into splash page territory.