Drowing in Validation issues

Hello,

I made a recent post regarding a font issue and I received this:

http://www.sitepoint.com/forums/css-53/cascading-issues-766173.html#post4905287

as one of my responses. I fear that this is my first website that I’m creating and had no idea about the whole validating issue — I naively thought “Heck, it looks good on my computer, so what’s the problem?”. After reading the post, I feel a bit overwhelmed as I was not aware of any of these issues. At this point, I’m sure that I could hire someone for not an outrageous sum to “clean up” the site for me (there are basically 5 “styles” of pages throughout the site so I couldn’t imagine it costing that much), but I’d very much like to understand the issues. So…with that in mind, the first of many questions:

  1. How do I validate my site? :slight_smile:
  2. What did deathshadow60 mean by:
  • tables for nothing
  • scripting on a page that shouldn’t warrant scripting
  • nonsensical heading orders
  • multiple H1’s

Finally (for now!), how can I become better educated in creating CSS best practices in general?

Thanks for helping me with this first step.

-Eric

first, don’t take it too hard – we all start somewhere and most of us have dealt with these issues while learning. I just always figure it’s better to tell you these things sooner than later.

That is one of the first mistakes I think we all make. One of the hardest things to grasp about developing websites is that “what you see is rarely what the user gets” – it’s why WYSIWYG’s are useless garbage for developing sites, and why many common practices like fixed metric fonts (saying all your fonts in px) and fixed widths are as a rule of thumb, piss poor design from an accessibility standpoint… It’s why having proper testing tools is so important – that means all the most recent browsers, and virtual machines (I like Sun Virtual Box) for testing things like different system metrics (font sizes) and legacy browsers. (personally I find online tools like browsershots unreliable and useless for that).

Don’t worry, we’ve all been there. As Paul O’b and I have said several times on these forums, in hindsight we wish someone had been as blunt and clearly illustrated these points when we were starting out – we could have avoided three or four years of doing it “wrong”.

That is why a handful of us take the time to help on forums like these – we’ve been in that boat and it sucks. Give a man a fish, he eats for a day; teach a man to fish, he’ll bore you to death on the Outdoor Life Network :smiley:

The W3C Markup Validation Service – for HTML
The W3C CSS Validation Service – for CSS

There is no reason for invalid HTML – and you can usually avoid having validation errors in the HTML if you practice some consistent formatting. Valid CSS on the other hand is a pipedream due to many browser specific workarounds, vendor prefixes, etc… but running it past CSS validation can point out typo’s and other mistakes; it’s ok to have invalid CSS as long as you know WHY it’s invalid (like vendor prefixes and browser specific workarounds). HTML has no such excuse.

If you use Opera, you can send the currently viewed page for validation by hitting CTRL+ALT+SHIFT+U… which I always find a bit cumbersome which is why I reset opera to it’s version 9 shortcut of CTRL+ALT+V.

You are using a table inside a form to make your columns – that is what is called “tables for layout” and is “non-semantic” code. Both are cardinal sins in modern web design. That isn’t “tabular data” so TABLE/TR/TD is the wrong code. You also lack labels on that form – labels form an association between text and a INPUT tag. You also lack a fieldset, one of the things needed for proper accessibility, you’re stating “post” in uppercase which is invalid for the doctype, and there is usually no legitimate reason to put an DIV with ID around it or a NAME on the form element.

So where you have:


<div id = "login">
<form id="form1" name="form1" method="POST"><table  border= "0" cellspacing="0" cellpadding="0">
  
   <tr><td>Username: </td>
    <td><input name="username" type="text" id="username" size="10" /></td>
  </tr>
  <tr>
    <td>Password: </td>
    <td><input type="password" name="password" id="password" size="10"/></td>
  </tr>
  <tr>
  <td></td>
  <td align="right"><input type="submit" name="signin" id="signin" value="Sign in!" /></td>
  <tr>
</table>

</form></div>

The proper markup would look more like this:


	<form id="login" method="post" action="login.php">
		<fieldset>
			<label for="loginUsername">Username:</label>
			<input name="username" type="text" id="loginUsername" size="10" />
			<br />
			<label for="loginPassword">Password:</label>
			<input type="password" name="password" id="loginPassword" size="10"/>
			<br />
			<input type="submit" name="signin" class="submit" value="Sign in!" />
		</fieldset>
	</form>

Form, fieldset, labels pointing at the text/password inputs. In the CSS to make columns the easiest approach is to set the labels to display:inline-block and set a width on them. (many people use floats, that’s old-school)

Further into the page you have an EMPTY table, There’s only two of them, but neither of them belong in your page.

Nothing you are doing on the page, excepting perhaps the “more” part in that UL should be using javascript to function. Even then, I’d just show that content indented instead of playing goofy animation tricks with it. Starting out I advise staying away from the “gee ain’t it neat” scripting until you have a handle on doing things with HTML/CSS and have the time to learn javascript instead of just copypasta from other sites. Even with the menu fade-ins and the accordian script there’s no reason for that page to need much more than 10k of scripting; your’e using 154k… ten times as much scripting as you have HTML! For what? An annoying fade-in animation on the menu and an accordian script to hide two paragraphs? That’s not “enhancing” the user experience or “making it more interactive”.

Most of your “javascript libraries” like jquery and mootools adding up to blowing again, hundreds of K of scripting on 10k or less script’s job, stupid animations that do NOT make the site more useful, or just plain “gee ain’t it neat” nonsense that’s all flash, no substance, and has no business on a website in the first place. That said tools often obfuscate or make the code needlessly cryptic certainly doesn’t help matters either. (But I’m an old school Wirth language programmer – I LIKE verbose!)

No matter how much your script kiddie javascript junkies and book writers wanting to make a buck off the sick trend want it to be otherwise.

Those go hand-in-hand. You’ve got more than one H1 on a page. A h1 is the topmost heading of which all other headings on the page are subsections – as such using more than one H1 makes no sense. You have, by my count, SEVEN elements on the page that should be heading tags – and yet you have two H1 and that’s it…

Heading tags are the most misused, underused, misunderstood and outright abused tags out there. SEO jokers abuse them to artificially inflate content instead of just writing good content (polishing a turd), many coders choose them not for their meaning but for their appearance, and even the simple concept of what headings are go “pow-zoom-phwee” like a joke over heckler’s head at a Jeff Dunham show.

It’s very simple – a H1 is the parent heading, whatever you make the H1, all other headings on the page should be treated as subsections. An h2 being the direct subsection of the h1 preceeding it. A h3 being the start of a subsection of an H2… so on and so forth – which is why it makes no sense to have multiple H1’s, and why it makes even LESS sense to skip over numbers or to use a lower number when you aren’t starting a new subsection.

the way I suggest approaching it, I’d swing a giant axe at the red heading; it’s redundant to the site title which is what I usually make the H1 – since as the parent heading for all content it should also be the FIRST content element on the page. “sneak a peak”, “for members”, “special features”, “find out more” and “get more info” all pretty much seem to be standalone headings with no relationships, so I’d make all of those H2.

One other thing, if you’re going to have members only links, I would advise AGAINST playing games with trying to manipulate that stuff “client side” using javascript; IF they’re not logged in, don’t waste bandwidth sending those links and instead omit them SERVER SIDE. Sending them to people who aren’t logged in is if nothing else bad practice from a security standpoint.

Well, as I said CSS is only as good as the HTML it’s applied to, and right now I’d focus on your HTML skills. Clean semantic HTML usually means a better structure as building a website is NOT and should NOT be entirely about it’s large desktop screen appearance… Again why I consider the “drawing a goofy picture in photoshop” first approach to web development to be putting the cart before the horse; while that may be targeting the largest proportion of the audience it neglects the point of HTML and a great many potential visitors.

If you are indeed just starting out, I always recommend the SitePoint Book Build Your Own Web Site The Right Way Using HTML & CSS by Ian Lloyd – he skips over a lot of outdated/outmoded practices and gets right down to a more modern and proper approach to site building. There is NO better beginner book out there. I disagree with a lot of the ‘stock garbage’ he suggests adding in later chapters like Google Analytics and tie-ins to various other ‘cut and paste code’ sites – but the majority of the book will help give you a firm foundation in understanding HTML and CSS.

From there I’d suggest reading a decent HTML refrerence end to end! The one I usually point people at is a bit dated, but since HTML 4 strict (and by extension XHTML 1.0 Strict) haven’t seen major revisions since 1998, why mess with what works?

HTML 4 Reference

I suggest reading through the ENTIRE orgnaizational list of elements so you know what the roles of each tag are. You don’t have to memorize exactly how they work, just be aware of each tags existance and purpose – there’s no shame in going back to the reference when

Sitepoint’s reference is a bit more complex and harder to use:
HTML Reference

But includes a lot of browser specific information. As with anything else it always helps to work from multiple sources.

The CSS reference here at sitepoint:
SitePoint CSS Reference

Is probably the most complete and accurate you’ll find online that is still in plain english. It’s a lot of dry reading, but understanding what all the properties do is often a faster route than doing copypasta from tutorials… especially with most online tutorials and books on shelves being decade out of date rot. (closing on decade and a half rot)

Finally, there’s one thing in your code that’s REALLY biting you in the tuchas IMHO, and that’s your formatting; or more specifically a lack therein. Few if any of your tabs line up, you omit carriage returns in many spots they would have helped you see your missing closing tags… and in general the indentation seems willy-nilly at best…

Just to illustrate that, here is how I’d have written the HTML for that page:


<!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
	type="text/css"
	rel="stylesheet"
	href="screen.css"
	media="screen,projection,tv"
/>

<title>
	myalgebrabook.com
</title>

</head><body>

<div id="pageWrapper">

	<h1>
		MyAlgebraBook.com<br />
		<small>A Different Kind of Math</small>
		<span><!-- image replacement --></span>
	</h1>

	<form id="login" method="post" action="login.php">
		<fieldset>
			<label for="username">Username:</label>
			<input name="username" type="text" id="username" size="10" />
			<br />
			<label for="password">Password:</label>
			<input type="password" name="password" id="password" size="10"/><br />
			<input type="submit" name="signin" class="submit" value="Sign in!" />
		</fieldset>
	</form>
	
	<div id="contentWrapper"><div id="content">
		<img
			src="/images/chapters/systems_linear1.png"
			width="174" height="171"
			alt="Linear Systems Graphed"
			class="trailingPlate"
		/>
		<p>
			Learn by Doing! Join MyAlgebrabook.com and have the first truly interactive and personalized learning experience on the web.
		</p><p>
			Let's face it:
		</p><p>
			Math textbooks are boring.
		</p><p>
			With our online book and homework system, you'll find algebra to be both fun and rewarding (No, we're NOT kidding!).
		</p><p>
			Every page in our online book makes you part of the learning process with interactive questions. You can hand in your homework online, where we score it for you, let you know how you can improve, and even give you the chance to learn from your mistakes.
		</p><p>
			Finally, your teachers can actually change the book so that it more closely matches your needs.
		</p>
	
		<h2>Special Features for our Student Members</h2>
		<ul>
			<li>
				Access to over 900 
				<a href="myalgebrabook.com" class="questions_sControl">thought-provoking questions and solutions</a>
				in our database.
			 	<div id="questions">
		 			<p>
		 				While other sides boast of mind-numbing numbers of alorithmically generated &quot;drilling-type&quot; questions, our indivually created questions are designed to actually make you think! But, don't worry...we've got full explanations to every one of them.
		 			</p><p>
		 				They come in a multiple number of formats, inlcluding free response, numeric answers, multiple-choice, and true/false and will improve your ability to understand math visually, algebriacally, and verbally.
		 			</p>
				<!-- #questions --></div>
			</li><li>
				Use of our 10 interactive
				<input type="button" value="graphing tools" onclick="window.open('/Chapters/Homepage/graphingtoolexample.html','mywindow','width=550,height=575,toolbar=no,location=no,directories=no,status=yes,menubar=no,scrollbars=no,copyhistory=no, resizable=no')" />
				to explore mathematical concepts
			</li><li>
				The chance to actually <a href="Chapters/Homepage/homepage_review_homework_example.php">learn from your mistakes</a> after you hand in your homework
			</li><li>
				Hundreds of interactive activities right in the book so that you &quot;learn by doing&quot;
			</li>
		</ul>
		
		<h2>Find out more!</h2>
		<ul>
			<li><a href="Chapters/Homepage/instructor_key_features.php">College Instructors and High School teachers</a></li>
			<li><a href="Chapters/Homepage/homeschool_key_features.php">Homeschool Parents</a></li>
		</ul>
			
	<!-- #content, #contentWrapper --></div></div>
	
	<div id="firstSideBar">
		<h2 class="downArrow">Sneak a Peek inside</h2>
		<ul>
			<li>
				<a href="#ab">Linear Relationships</a>
				<ul>
					<li><a href="/Chapters/Linear_Functions/linear_relationships_making_connections.php">Making Connections</a></li>
					<li><a href="/Chapters/Linear_Functions/linear_introductory_problem.php">Introduction</a></li>
					<li><a href="/Chapters/Linear_Functions/linear_tables.php">Tables</a></li>
					<li><a href="/Chapters/Linear_Functions/linear_Equations.php">Equations</a></li>
					<li><a href="/Chapters/Linear_Functions/linear_Graphs.php">Graphs</a></li>
					<li><a href="/Chapters/Linear_Functions/linear_definition_slope1.php">Slope</a></li>
					<li><a href="/Chapters/Linear_Functions/linear_definition_yint1.php">The y intercept</a></li>
					<li><a href="/Chapters/Linear_Functions/linear_function_definition.php">The Linear Function</a></li>
					<li><a href="/Chapters/Linear_Functions/linear_inequalities1.php">Linear Inequalities</a></li>
					<li><a href="/Chapters/Linear_Functions/linear_systems_of_equations1.php">Systems of Equations</a></li>
					<li><a href="/Chapters/Linear_Functions/linear_chapter_summary.php">Chapter Summary</a></li>
				</ul>
			</li>
		</ul>


		<h2>For Members:</h2>
		<ul>
			<li>
				<a href="#ab">The Language of Algebra</a>
				<ul>
					<li><a href="#members_only">Making Connections</a></li>
					<li><a href="#members_only">Introduction</a></li>
					<li><a href="#members_only">Types of Real Numbers</a></li>
					<li><a href="#members_only">Variables and Equations</a></li>
					<li><a href="#members_only">The Number Line</a></li>
					<li><a href="#members_only">Graphs</a></li>
					<li><a href="#members_only">Functions</a></li>
					<li><a href="#members_only">Chapter Summary</a></li>
				</ul>
			</li><li>
				<a href="#ab">Absolute Value</a>
				<ul>
					<li><a href="#members_only">Making Connections</a></li>
					<li><a href="#members_only">Introduction</a></li>
					<li><a href="#members_only">The Absolute Value Function</a></li>
					<li><a href="#members_only">Distance From the Origin</a></li>
					<li><a href="#members_only">Solving Equalities</a></li>
					<li><a href="#members_only">Distance Between Two Points</a></li>
					<li><a href="#members_only">Solving Inequalities</a></li>
					<li><a href="#members_only">Chapter Summary</a></li>
				</ul>
			</li><li>
				<a href="#ab">Quadratic Relationships</a>
				<ul>
					<li><a href="#members_only">Making Connections</a></li>
					<li><a href="#members_only">Introduction</a></li>
					<li><a href="#members_only">The Square Function</a></li>
					<li><a href="#members_only">The Quadratic Function</a></li>
					<li><a href="#members_only">Introduction to Factoring</a></li>
					<li><a href="#members_only">Multiplying Binomials</a></li>
					<li><a href="#members_only">Factoring Quadratics</a></li>
					<li><a href="#members_only">Completing the Square</a></li>
					<li><a href="#members_only">The Quadratic Formula</a></li>
					<li><a href="#members_only">The Vertex Formula</a></li>
					<li><a href="#members_only">The General Quadratic</a></li>
					<li><a href="#members_only">Chapter Summary</a></li>
				</ul>
			</li><li>
				<a href="#ab">Exponential Relationships</a>
				<ul>
					<li><a href="#members_only">Making Connections</a></li>
					<li><a href="#members_only">Introduction</a></li>
					<li><a href="#members_only">Basic Rules of Exponents</a></li>
					<li><a href="#members_only">0 as an exponent</a></li>
					<li><a href="#members_only">Negative Exponents</a></li>
					<li><a href="#members_only">Dividing with Exponents</a></li>
					<li><a href="#members_only">Rational Exponents</a></li>
					<li><a href="#members_only">Exponential Equations</a></li>
					<li><a href="#members_only">Chapter Summary</a></li>
				</ul>
			</li><li>
				<a href="#ab">Radical Relationships</a>
				<ul>
					<li><a href="#members_only">Making Connections</a></li>
					<li><a href="#members_only">Introduction</a></li>
					<li><a href="#members_only">Definition of a Radical</a></li>
					<li><a href="#members_only">Basic Radical Equations</a></li>
					<li><a href="#members_only">Multiplying Radicals</a></li>
					<li><a href="#members_only">Dividing Radicals</a></li>
					<li><a href="#members_only">Adding Radicals</a></li>
					<li><a href="#members_only">Rationalizing Denominators</a></li>
					<li><a href="#members_only">General Radical Equations</a></li>
					<li><a href="#members_only">Chapter Summary</a></li>
				</ul>
			</li><li>
				<a href="#ab">Polynomials</a>
				<ul>
					<li><a href="#members_only">Making Connections</a></li>
					<li><a href="#members_only">Introduction</a></li>
					<li><a href="#members_only">Definition of a Polynomial</a></li>
					<li><a href="#members_only">The Basic Shape of a Polynomial</a></li>
					<li><a href="#members_only">Adding Polynomials</a></li>
					<li><a href="#members_only">Multiplying Polynomials</a></li>
					<li><a href="#members_only">Chapter Summary</a></li>
				</ul>
			</li><li>
				<a href="#ab">Rational Relationships</a>
				<ul>
					<li><a href="#members_only">Making Connections</a></li>
					<li><a href="#members_only">Introduction</a></li>
					<li><a href="#members_only">Dividing Polynomials</a></li>
					<li><a href="#members_only">Numerical Ratios</a></li>
					<li><a href="#members_only">The Golden Ratio</a></li>
					<li><a href="#members_only">Rational Equations</a></li>
					<li><a href="#members_only">Chapter Summary</a></li>
				</ul>
			</li><li>
				<a href="#ab">The Algebra of Many Variables</a>
				<ul>
					<li><a href="#members_only">Making Connections</a></li>
					<li><a href="#members_only">Introduction</a></li>
					<li><a href="#members_only">Literal Equations</a></li>
					<li><a href="#members_only">Linear Systems with Many Variables</a></li>
					<li><a href="#members_only">Multivariable Polynomials</a></li>
					<li><a href="#members_only">Chapter Summary</a></li>
				</ul>
			</li><li>
				<a href="#ab">Beyond Algebra</a>
				<ul>
					<li><a href="#members_only">Making Connections</a></li>
					<li><a href="#members_only">Introduction</a></li>
					<li><a href="#members_only">The Interval Bisection Method</a></li>
					<li><a href="#members_only">What is Calculus?</a></li>
					<li><a href="#members_only">Chapter Summary and Concluding Remarks</a></li>
				</ul>
			</li>
		</ul>
	
	<!-- #firstSideBar --></div>
	
	<div id="secondSideBar">
		<h2>Get More Info</h2>
		<ul>
			<li><a href="/Chapters/Homepage/instructor_key_features.php">College Profs</a></li>
			<li><a href="Nowhere.com">High School Teacherstodo</a></li>
			<li><a href="/Chapters/Homepage/homeschool_key_features.php">Homeschoolers</a></li>
		</ul>
	<!-- #secondSideBar --></div>
	
	<ul id="footer">
		<li>&copy; 2011 MyAlgebraBook.com</li>
		<li><a href="/index.php">Home</a></li>
		<li><a href="/Chapters/Homepage/about.php">About</a></li>
		<li>FAQ</li>
		<li class="last"><a href="mailto:support@myalgebrabook.com">Contact Us</a></li>
	</ul>

<!-- #pageWrapper --></div>

</body></html>

Which pitches about 5k (almost a third) of your HTML in the trash despite adding some extra closing comments and some formatting changes.

To break it down section by section for you:

First is the doctype – I go with XHTML 1.0 Strict because I like the formatting rules of XHTML, and STRICT means tags and attributes I have no business using from HTML 3.2 are ‘invalid’. CENTER, FONT, ALIGN, BGCOLOR, IFRAME – those have NO place in modern markup.

You’ll notice I like to put each attribute on it’s own line when they’d end up really long – improves legibility; I also condense attributes that should never have anything between them to single lines… <html><head>, </head><body>, </body></html> – it’s a reminder “nothing goes between them” and to me just makes for cleaner looking code.

Since we’re both doing the XHTML thing, notice I also include the LANG attribute – if you’re using XHTML you should do those, AND sepcify the content-language meta as well. Notice also how I format the meta’s using that ‘one attribute per line’ routine. Since XHTML standalone tags require the self-closing /> at the end, this results in a very attractive and easy to follow codebase.

The CSS link uses just the one file per media type – there is no legitimate reason to call more than two stylesheets per media target; also notice I send screen,projection,tv – many TV browsers you want to get the screen CSS, and projection is used in the full screen mode of many KIOSK installations. (Opera’s kiosk mode being the most common of these). If you’re targeting screen, it’s most likely you should be targeting those as well.

the rest of the HEAD is nothing fancy, so we get down into the body and we have a div#pageWrapper. Up to this point 99% of the sites I write use this same code. The pageWrapper I typically use to set up my width constraints. It’s a lot easier to say the other width once and let everything inside that one div fill it, than to go through stating widths on everything (Which I see people do all the time). It also makes it easier to make a fluid or semi-fluid layout (one that can expand and contract to fit the screen) using the one container and ‘inheriting’ off that width.

As mentioned, none of your ‘headings’ on the page are appropriate to be the parent as they’re all pretty much siblings in terms of “structure”. (The word used in the spec is importance – I avoid using that word because it confuses people as they take it too literally)… so we make the site title the parent since all those headings are subsections of the SITE. You have a tagline which for all intents and purposes is still part of the heading, so I use the presentational ‘small’ tag to mark that up as different; there is no element for deemphasis so small is often used to cover that. Most sites use an image logo instead of plaintext – but plaintext is good for screen readers and search engines, so I put in a “sandbag” (aka empty) span which will be absolute positioned over the text with the logo as it’s background. This is called “gilder-levin image replacement” and is one of the more powerful HTML/CSS techniques available.

The form as mentioned above is switched to a more ‘valid’ structure.

NOTICE we don’t need any extra “HEADER” div or “NAV” div or div in the form. Semantic tags with meanings, especially block-level ones means we don’t need them.

The double wrapping #contentWrapper/Content div is an older take on the “holy grail” type layouts for putting the content FIRST. People on single column handhelds will typically thank you for that, though the addition of a ‘skipto’ link to get to the menu may be in order. True “holy grail” requires no extra DIV, but It relies on too many hacks and tends to break too easily; as much of a minimalist as I am when it comes to coding, I say suck it down and use the extra DIV as it turns it from a neat trick, into a bulletproof method for building a site.

The image is just a image, no extra wrapping div needed; I use the class “trailingPlate” to indicate that it’s float:right with left/bottom margin… a “leadingPlate” being the opposite and a regular “plate” being a centered image… borrowing from print terminology to say what they are – those appearances I mentioned may not apply depending on the media target which is why saying how they look is bad practice. HTML is for what they are, NOT how they appear.

See how I formatted the paragraph tags? I like to see the opening/close of my tags without sideways scrolling or having to hunt for them – it prevents me from making mistakes; in your original you missed a </p> and a number of </li>, which is invalid markup in XHTML – I suspect because you put them at the end of long lines or didn’t put in extra carriage returns. Good formatting habits can prevent you from making mistakes in the first place; it’s also why I consider things like white-space stripping to “save bandwidth” typically being little more than intentional obfuscation to hide rubbish coding – most people practicing said techniques usually having a hundred K of HTML for 5K of plaintext, then kvetch about their slow pages and hosting costs.

The rest of this section are nothing fancy – you have headings, paragraphs, lists. You were using all sorts of spans and classes and extra wrappers and for no real reason. I left in the hooks and DIV for using an accordion script in the middle of that list – but I’d SERIOUSLY consider axing that concept and just show the text. Again, it’s a “gee ain’t it neat” effect that does NOTHING to make the page easier to use.

The first sidebar gets… interesting ID, no? #firstSideBar – verbose names can prevent you from having to go overboard with comments or scrathching your head a year from now. Again, you have obvious headings, and lists… No need to get fancier than that. CSS can in all modern browsers handle the menu flyouts, having them appear INSTANTLY instead of the annoyingly slow and absurdly bloated fade-in javascript. For legacy IE (IE6-) a simple behavior file like csshover3.htc can pick up the slack if you truly care about going back that far. (~90 bytes of CSS and a 2.5k file sent only to IE6-, where’s the harm).

The Second sidebar at this point should be nothing new either.

Finally comes the footer. Sine you just had a separated list I turned the whole footer into a unordered list. Works well and for the separators you just set border-right, and then on li.last border:none;

Close the pagewrapper, close body/html, and done…

At this point I’d go back through and add some horizontal rules to break up the content for people browsing with CSS off. Not everyone has CSS on or images on, so you should be testing your code for how well it behaves with all combinations of that. Opera has the ability to check that built into it’s “view” menu, while you can add that functionality to Firefox with the web developer toolbar. I consider BOTH browsers sets of tools important when testing your pages as they compliment each-other well. You extend Firefox with the web developer toolbar and firebug, and you get an excellent set of analysis tools doing a number of things Opera can’t… conversely all the stuff built into opera is convenient as you don’t have to go hunting for extensions – and it does a number of things better than FF can. (Images off and CSS off for example is faster/easier and seems more ‘accurate’)… and if nothing else, Opera doens’t crash anywhere NEAR as often as firefox does. I also suggest that if you rely on the web developer toolbar, you install FF 3.5.2 as a standalone and use it there; many of it’s functions are broken/crippled in newer builds of firefox. (document outline, document size, etc, etc)

I ALWAYS write the semantic markup for a page, completely, before I even THINK about applying the CSS. Sure when writing the CSS I may have to go back and add the occasional DIV or SPAN to make up for CSS 2’s shortcomings, but really that core HTML should remain effectively unchanged as the screen layout is created.

… and of course screen layout is just PART of the equation, as one shouldn’t forget to include at LEAST a print stylesheet as well; which is why designing the HTML for screen appearance is a miserable failure… and with some parts of CSS3 reaching deployability media queries to detect handhelds that don’t obey handheld. (iPhone, Droid)

Hope this clears the sky a bit for you, or at least helps get you pointed the right direction.

The sky has been opened and I guess that I’ve got a lotttttttt of work to do on my site before I set it free. I wish I weren’t having some out of town visitors over the next two weeks (grumble…grumble). At the very least I downloaded the html book and will take a look at it in addition to trying to implement your many suggestions here.

And…for the record. I DO appreciate your bluntness!