Ok, actually seeing the code in question, from the top…
Four stylesheets and no media types? Ouch. Way too many handshakes for little return.
I’d hide the H1 text UNDER the image using gilder-levin image replacement, that way images off you don’t get the ugly box and uglier alt text.
H1 should be unique, doesn’t need an ID unless you’re planning on targeting it with javascript.
Clearfix, this isn’t 2001.
Extra DIV around elements that could be styled directly.
Your use of a span to force line-break is broken on large font machines, you have that issue in a number of places where you’ve got dynamic content inside tiny little fixed size boxes. Both sidebars are WAY too tiny to have such large dynamic fonts inside them… I’d either fix the font size on the offending elements, or set the sidebar widths in EM.
I’m not entirely sold that everything you have ID’s on… well… needs ID’s. The unique ones sure, but you’ve got a lot of them that could inherit off of body. I’d also put serious consideration into changing it to a middle column first code-order, as having the sidebar before the content is a bit annoying CSS off.
Not sold on the definition list either, those look more like subsection headings than terms and definitions. I think people dive for DL’s way too quickly these days – they have their place, but really that looks to me like it should be a bunch of H3 and P, no extra tags/structure needed.
The universal reset is also gonna bite you when/if you add forms to the page.
Some of the comments are also kind of funny:
<!-- PAGE HEADER -->
<div id="pageHeader">
Really? Opening a div with the pageheader Id is the page header?
Others though…
</div>
<!-- Display Welcome -->
<p id="welcome">
could trip rendering bugs cross browser… in addition to the comedy of saying it’s the welcome text twice.
You’re using nice verbose names with a indenting scheme, don’t waste time on redundant comments. Only time where comments of that nature are really helpful is on closings, and so as to avoid tripping rendering bugs it’s why in my code you’ll often see this:
<!-- .subSection –></div>
instead of the more common:
</div><!-- end .subSection –>
Comments between sibling tags can trip rendering bugs (particularly if floats or inline-block are involved) in legacy IE and some versions of FF (double-render and disappearing content being the worst two). Moving the comment before the closing tag prevents this from ever being an issue… and it’s a </div>, of course it’s the end of the section
Not sure I’d keep the footer div either… but that really hinges on what’s going there for content and if you’re going to have more than just the UL… Funny that, I almost never put things in lists in my own footers.
From what you have, my approach to the same page wouldn’t be THAT different, but I’d only have Id’s on the more… unique ones, my heading placement would be a bit different, and I’d probably have a wee bit different a use of DIV and P. (or should I say lack of P around some things)… and some HR to indicate changes in topic… Something like this:
<!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"
/>
<link
type="text/css"
rel="stylesheet"
href="/theme/screen.css"
media="screen,projection,tv"
/>
<title>
Debbie's Small-Business Central
</title>
</head><body>
<div id="pageWrapper">
<h1>
Debbie's Small-Business Central
<span><!-- image replacement --></span>
</h1>
<div id="userBar">
<span>Hello.</span>
<a href="">Log In</a> to access premium content.
Not a Member? <a href="">Start Here</a>
<!-- #userBar --></div>
<ul id="mainMenu">
<li class="current">
<a href="/index.php">Home</a>
</li><li>
<a href="/pages/article_index.php">Articles</a>
</li><li>
<a href="/pages/howto_index.php">How-To Guides</a>
</li><li>
<a href="/pages/news_index.php">In the News</a>
</li><li>
<a href="/pages/interview_index.php">Interviews</a>
</li>
</ul>
<hr />
<div id="contentWrapper"><div id="content">
<!-- double wrapper for easier content column first layout -->
<div class="subSection">
<h2>
Small-Business Facts<br />
<small>Some things to know about Small-Business...</small>
</h2>
<div class="factoids">
<h3>
<span>Fact #01:</span>
Small-Businesses represent 99.7% of all employer firms.
</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris quam nisi, egestas mattis commodo a, adipiscing eget erat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce ultrices lacus nec leo mattis vestibulum. Donec pharetra luctus nisl et sollicitudin. Aliquam faucibus tellus at orci pretium faucibus. Duis malesuada, enim ac luctus auctor, metus libero dictum nunc, vitae imperdiet est massa eget massa.
</p>
<h3>
<span>Fact #02:</span>
Small-Businesses employ half of all private sector employees.
</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris quam nisi, egestas mattis commodo a, adipiscing eget erat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce ultrices lacus nec leo mattis vestibulum. Donec pharetra luctus nisl et sollicitudin. Aliquam faucibus tellus at orci pretium faucibus. Duis malesuada, enim ac luctus auctor, metus libero dictum nunc, vitae imperdiet est massa eget massa.
</p>
<h3>
<span>Fact #03:</span>
Small-Businesses create more than half of the non-farm private GDP.
</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris quam nisi, egestas mattis commodo a, adipiscing eget erat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce ultrices lacus nec leo mattis vestibulum. Donec pharetra luctus nisl et sollicitudin. Aliquam faucibus tellus at orci pretium faucibus. Duis malesuada, enim ac luctus auctor, metus libero dictum nunc, vitae imperdiet est massa eget massa.
</p>
<!-- .factoids --></div>
<!-- .subSection --></div>
<!-- #content, #contentWrapper --></div></div>
<hr />
<div id="firstSideBar">
<div id="sCorporation">
<a href="#">
<strong>What is an <span>S-Corporation?</span></strong>
(Learn more here)
</a>
</div>
<hr />
<div class="subSection">
<h2>Featured Article</h2>
<h3>
Homemaker to Business Owner:
<small>Pamela's Story</small>
</h3>
<p>
In 2006, if you would have told Pamela Wilson that some day soon she would be Founder and President of her own company she would have thought you were crazy?!
</p><p>
Yet five years later she now owns and runs a successful and profitable company which sells T-shirts to teams, groups, and organizations from not only across her home state of Ohio, but across the U.S.
</p><p>
To read more about this small-business sucess story, and to learn how Pamela went from Homemaker to Business Owner
<a href="#">click here</a>.
</p>
<!-- .subSection --></div>
<!-- #firstSideBar --></div>
<hr />
<div id="secondSideBar">
<div class="subSection">
<h2>Small-Biz Workshops</h2>
<h3>Current Dates</h3>
<ul>
<li>December 3, 2011</li>
<li>December 10, 2011</li>
<li>December 17, 2011</li>
</ul>
<h3>Upcoming Locations</h3>
<ul>
<li>Phoenix, AZ</li>
<li>Chandler, AZ</li>
<li>Albuquerque, NM</li>
</ul>
<p>Lorem ipsum dolor sit amet...</p>
<!-- .subSection --></div>
<hr />
<div id="fastFigures">
<span>40.2%</span>
U.S. Businesses owned by Women (or with majority ownership) in 2006.
<!-- #fastFigures --></div>
<!-- .secondSideBar --></div>
<hr />
<div id="footer">
<ul>
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
</ul>
<!-- #footer --></div>
<!-- #pageWrapper --></div>
</body></html>
I have time later I’ll toss together the CSS I’d use with that.