While Pauls’ silver bullet fix is “cute” – your real problems run deeper than that. You’ve got endless DIV for nothing, spans for nothing, IE conditionals for nothing, and a layout that’s broken here in every browser I look at it in. I’ve got a saying, “CSS is only as good as the HTML it’s applied to” – and your HTML, well…
Everything I’ve come to expect from the people slapping the HTML 5 lip service doctype and the rest of it’s nonsense into a layout.
You have here a VERY simple layout, but at 7.8k of markup for 1.8k of plaintext it could use a bit of a trim.
To show you what I mean, here’s how I’d approach writing that same markup:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml"
lang="en"
xml:lang="en"
><head>
<meta
http-equiv="Content-Type"
content="text/html; charset=utf-8"
/>
<meta
http-equiv="Content-Language"
content="en"
/>
<link
rel="shortcut icon"
href="/wp-content/themes/child/favicon.ico"
/>
<title>
Fourteen Design - Creative Web Design Guildford
</title>
<link
rel="alternate"
type="application/rss+xml"
title="Fourteen Design - Creative Web Design Guildford » Feed"
href="/feed"
/>
<link
rel="alternate"
type="application/rss+xml"
title="Fourteen Design - Creative Web Design Guildford » Comments Feed"
href="/comments/feed"
/>
<link
rel="wlwmanifest"
type="application/wlwmanifest+xml"
href="/wp-includes/wlwmanifest.xml"
/>
</head><body>
<div id="pageWrapper">
<h1>
<a href="index.html">
Fourteen Design
<span><!-- image replacement --></span>
</a>
<small>
Creative - Web Design - Guildford
</small>
</h1>
<ul id="mainMenu">
<li><a href="/">Home</a></li>
<li><a href="/portfolio" >Portfolio</a></li>
<li><a href="/about">About</a></li>
<li><a href="/pricing" class="current">Pricing</a></li>
<li><a href="/contact">Contact</a></li>
<li><a href="/blog">Blog</a></li>
</ul>
<hr />
<div id="content">
<div class="services">
<h2>Services & Pricing</h2>
<p>
As every website is bespoke I offer you a detailed quote after discussing your web design needs.
However, below are some services I offer and approximate costings.
</p>
<hr />
<!-- .services -->
<div class="features">
<div class="design">
<h2>Website Design</h2>
<p>
A bespoke website site of 5-10 pages with integrated CMS would cost between £550 and £750 depending on individual needs.
</p>
<hr />
<!-- .design --></div>
<div class="hosting">
<h2>Hosting</h2>
<p>
Uploading and hosting a site to make it live, costs £40 per year
</p>
<hr />
<!-- .hosting --></div>
<div class="maintennance">
<h2>Maintenance</h2>
<p>
I offer a yearly contract of £150 which includes website maintenance of an hour a month (on average over the year) or you can pay on an hourly basis at a rate of £15 per hour.
</p>
<hr />
<!-- .maintennance --></div>
<div class="wordpress">
<h2>Wordpress</h2>
<p>
Wordpress is the Content Management system I use in sites which enable you to control your content by adding news posts. Integrated CMS into a bespoke site costs around £200 and is included in the Website Design cost.
</p><p>
I can also set up a website using an existing Wordpress Theme (either a free one or one that you purchase) for £150 (this includes hosting for the first year).
</p><p>
Any Wordpress prices quote include a free half hour lesson in using Wordpress (it's very easy).
</p>
<hr />
<!-- .wordpress --></div>
<div class="report">
<h2>SEO (Search Engine Optimisation) Reports</h2>
<p>
After a period of time (or if you have an existing site) you may wish to have a report detailing the effectiveness of your website. For £150 I can provide a detailed Search Engine Optimisation report analyzing whether your website is fullfilling it's potential. For example is your site ranking highly in Google searches? Where abouts are users visiting and leaving the site?
</p>
<hr />
<!-- .report --></div>
<!-- .features --></div>
<!-- #content --></div>
<!-- #pageWrapper --></div>
<div id="footer"><div>
<ul class="social">
<li>
<a href="#" title="Follow us on FriendFeed">
<img src="images/friendfeedIcon.png" alt="Friendfeed" />
</a>
</li><li>
<a href="http://www.twitter.com/FourteenDesign" title="Follow us on Twitter">
<img src="images/titterIcon.png" alt="Twitter" />
</a>
</li><li>
<a href="#" title="Follow Fourteen Design">
<img src="images/rssIcon.png" alt="RSS Feed" />
</a>
</li><li>
<a href="#" title="Follow us on Facebook">
<img src="images/facebookIcon.png" alt="Facebook" />
</a>
</li>
</ul>
<ul class="menu">
<li><a href="/">Home</a></li>
<li><a href="/portfolio">Portfolio</a></li>
<li><a href="/about">About</a></li>
<li><a href="/pricing">Pricing</a></li>
<li><a href="/contact">Contact</a></li>
<li><a href="/blog" class="last">Blog</a></li>
</ul>
Copyright 2011 Fourteen Design, All Rights Reserved
</div><!-- #footer --></div>
</body> </html>
I realize bending wordpress over the table to try and convince it to output GOOD HTML is a bit like trying to bench-press an aircraft carrier, but you seem to already have a decent handle on that given the amount of turdpress idiocy you already seem to have gutted out of there. (like how it vomits up endless pointless classes on menu code).
your layout is very simple – the HTML should reflect that. Oh, and if you’re wondering why I pulled the list, it’s because once you have major block level pairings (like h2 and P) to me there ceases to be a reason to stack extra meaning upon it.
Though I have to ask, are all the h2 that are tabbed in SUBSECTIONS of that H2 which is not? They appear to be so, in which case those should be H3, not H2.
When I’m back at my workstation (on the laptop right now) I’ll toss together the CSS to show you what I mean on how with so simple a layout 99.9% of the extra nonsense like the IE conditionals and endless wrapping DIV you have in there is, well… to be brutally frank pointless bloat.