Quote Originally Posted by JenniferBigBlue View Post
Would you mind looking at what I did and see if there are any claring errors?
Well, how about I give you my typical... how was it Stevie D put it, "Hatchet job"? This will be a complete review of the page top to bottom.

First off it seems to load pretty peppy - that's good. 153k is a little over my upper limit for page design, but given the number of content images that's entirely acceptable especially since it's only 18 separate files.

Appearance-wise it's problematic due to the use of absurdly undersized fixed metric fonts. Anything less that 12px is typically illegible, I get squirrelly at anything under 14px, and you should NOT be declaring fonts on the content in PX in the first place. The WCAG recommends %/EM so that handheld users aren't stuck with fonts too big, and large font/120dpi (like myself) or Win7 large/144 dpi users (like on my media center) aren't diving for the zoom when they land on your page.

If you are going to link an external stylesheet, INCLUDE a MEDIA TYPE. Likewise even when just developing a page it helps to NOT get in the habit of putting ANY CSS in the markup... It's actually more work and more confusion -- but remember this is coming from the guy who thinks tabs are a colossal step BACKWARDS when it comes to text editors -- open up the CSS and HTML in two SEPARATE windows so you can edit them side-by-side. Beats the tar out of scrolling up and down.

You appear to be using javascript to do CSS' job -- with static scripting ALSO inlined in the markup. The only place that should need scripting assist is IE6 or lower, so I'd load something like CSShover3.htc in the CSS rather than send 7k of "Javascript for nothing" at every browser.

Likewise, I would NOT be playing the stupid "content first at ALL costs" nonsense of putting the main menu after the content. That is rarely worth the extra effort and is proabably part of why you have multiple DIV around that UL for NOTHING. Search engines are smart enough to realize a UL full of links is a menu, and that's what 'jumpto' menus are for in terms of accessibility -- not just for getting past the content, but also for things like narrow-screen display using 'accesskey menus'.

Those images not only have absurdly undersized illegible text in them, they are presentational affectations to the text and as such have NO business being in your markup... much less that if they are all getting the same STYLE applied to them, get that the devil out of the markup and into the stylesheet too so you are only saying it ONCE, not FIVE TIMES.

This is made even more confusing by the sidebar having what appear to be content images that are being loaded via a class in the CSS -- you have those backwards!

The dropdown menus should be nested IN the menu, and not placed after it with DIV's around them on what should ALSO be lists.

You also seem to be using presentational classes -- stuff in the HTML, and this includes class and ID names, should say what things ARE, NOT how they are going to appear; as such classes like "floatleft" are so pointless, you might as well go back to HTML 3.2 and say 'align="left"' -- completely missing the POINT of separation of presentation from content.

Your use of heading tags is completely nonsensical. NOTHING in the footer qualifies as the 'start of a new subsection, it is improper to skip heading levels, so there is ZERO reason those should be h4 and h6 -- just as you should NOT be using scripting to emulate target="blank" as the REASON it's deprecated is you shouldn't be forcing that choice down the users throat in the first place. They want it in a new window, they can middle-click or shift-click if they're a Mac... ok, I won't say the word I was going to use. They also are not child subsections of "why choose" which is just PART of why I typically say using a content area element as the H1 is in fact wrong... also "wrong" is the use of B tags for what should be headings.

Also, if your TITLE attribute is IDENTICAL to the text inside the element you are putting TITLE on, there is NO LEGITIMATE REASON to put TITLE on it in the first place!!! (I keep seeing that one, what the?!?).. well, unless you are putting accesskeys on it and don't want the URL to show up on handheld or Opera accesskey menus.

Also, the image replacement method used on that heading doesn't work when images are disabled, defeating the POINT of using image replacement in the first place!

The drop shadow is ridiculously large a file -- while that's a 'easy' technique for applying one, it's not exactly internet friendly thanks to the 18k of "nothing". One of the few times I'd seriously consider two separate images and an extra wrapping div to do that -- it might be a couple hundred bytes code, but it would cut out around 17k of image filesize.

To that end I also can't figure out why you are using images for that main menu -- unless it's to make it intentionally hard to read.

You should also back up off the use of absolute URL's including the domain name. A simple "/" is all you need on those, saving bandwidth and making ZERO difference to any browser or search engine. (even if some SEO sleazeballs claim it does, that's 100% myth)

The non-breaking spaces and vertical breaks on the footer menu are also not exactly a great idea... that too should be a list.

Using line-breaks to divide up sections inside P tags is just bad practice. You are basically using line-breaks to do margin and/or padding's job.

Finally -- (c) copyright? Isn't that just a LITTLE redundant?

So, that taken into consideration, my approach to that markup would probably end up looking something like this:

Code:
<!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"
/>

<!--

	Don't forget to implement these later!

<link
	type="text/css"
	rel="stylesheet"
	href="print.css"
	media="print"
/>

<link
	type="text/css"
	rel="stylesheet"
	href="handheld.css"
	media="handheld"
/>

-->

<title>
	Testing CSS
</title>

</head><body>

<div id="pageWrapper">
	<h1>
		<a href="/">
			Gold Coast Yachts
			<small>St. Croix, US Virgin Islands</small>
			<span><!-- image replacement --></span>
		</a>
	</h1>

	<ul id="mainMenu">
		<li class="jumpTo">
			<a href="#content" accesskey="2" title="Content">
				Jump to Content
			</a>
		</li><li class="jumpTo">
			<a href="#sideBar" accesskey="3" title="SideBar">
				Jump to SideBar
			</a>
		</li><li class="jumpTo">
			<a href="#pageWrapper" accesskey="1" title="Top of Page">
				Top of Page
			</a>
		</li><li class="jumpTo">
			<a href="#footer" accesskey="9" title="Footer">
				Jump to Footer
			</a>
		</li><li>
			<a href="index.html">Home</a>
		</li><li>
			<a href="about.html">Comapny</a>
			<ul>
				<li><a href="about.html">About GCY</a></li>
				<li><a href="projects.html">Completed Projects</a></li>
				<li><a href="employment.html">Employment Opportunities</a></li>
				<li><a href="articles.html">In The Media</a></li>
				<li><a href="construction.html">Currently Under Construction</a></li>
			</ul>
		</li><li>
			<a href="#">Vessels></a>
			<ul>
				<li><a href="catamarans.html">Day Sail Catamarans</a></li>
				<li><a href="yachts.html">Cruising Yachts</a></li>
				<li><a href="guests.html">Guest Shuttles</a></li>
				<li><a href="ferries.html">Ferries</a></li>
				<li><a href="snorkels.html">Snorkel Boats</a></li>
				<li><a href="dives.html">Dive Boats</a></li>
				<li><a href="party.html">Party Cats</a></li>
				<li><a href="response.html">Response Vessels</a></li>
			</ul>
		</li><li>
			<a href="brokerage.html">Brokerage</a>
		</li><li>
			<a href="contact.html">Contact Us</a>
		</li>
	<!-- #mainMenu --></ul>

	<hr />
	
	<div id="content">
	
		<div class="trailingPlate">
			<img
				src="images/about/shearwaterCockpit.jpg"
				alt="Shear Water Cockpit"
			/>
		<!-- .trailingPlate --></div>
		<h2>Why choose GCY?</h2>

		<h3>Our Experience</h3>
		<p>
			The 95 plus multi-hulls built by Gold Coast Yachts reflect the company's experience gained from over 25 years of commercial vessel construction, operation and ocean deliveries. Each boat is built, assembled and commissioned by teams of skilled craftsmen trained in a variety of composite construction and system installation techniques. Behind the scenes, a design, engineering and systems team is led by Roger Hatfield and Jeff Bisson to meet the structural, mechanical, electrical, plumbing and Coast Guard demands of each project.
		</p>

		<div class="leadingPlate clear">
			<img
				src="images/about/DSC00882.jpg"
				alt="Our Yacht Construction Processes"
			/>
		<!-- .leadingPlate.clear --></div>
		<h3>Our Construction Processes</h3>
		<p>
			Typically, hulls are built in female molds using resin infusion processes. We have molds for component construction of bridgedeck floors, cabin roofs, decks, flat panels, beams, daggerboards and rudders which are then built using either resin infusion and wet-bag vacuum processes. Primary materials consist of epoxy infusion resin, Vectorply fabrics and Corecell foam. Structural and secondary components are prefabricated and assembled once the hulls are completed using Gougeon West System epoxy. The entire surface of the vessel is protected by epoxy primers and then top coated with Alexseal, Awlgrip or Dupont polyurethane topcoats to ensure a durable quality finish.
		</p>
		
		<div class="trailingPlate">
			<img
				src="images/about/wingmast.jpg"
				alt="Yacht Wing Mast"
			/>
		<!-- .trailingPlate --></div>
		<h3>Our Sailing Vessels</h3>
		<p>
			The "heart" of the Gold Coast Yachts sailing design is our rotating wing spar. The efficient low windage rig features a 2:1 shaped resin-infused carbon fiber / Corecell foam wing spar combined with our developed hull rocker and thick-sectioned high aspect ratio rudders and daggerboards to produce maneuverability unparalleled by other catamarans.
		</p>
		
		<div class="leadingPlate">
			<img
				src="images/about/fastcat5.jpg"
				alt="Our Power Cats"
			/>
		<!-- .leadingPlate --></div>
		<p>
			Wave-piercing hull forms, displacement hull forms, displacement hull forms with canoe shaped sterns: commonality? Our desire is to modern-build fuel-efficient composite power cats suited to an owner's intended use. We take pride in our ability to meet an owner's requirements for performance, cost and accommodations through careful selection of vessel type, size, layout, horsepower and drive line system.
		</p>
		
		<h3>Relationships</h3>
		<p>
			We enjoy meeting each new client and learning about their home, business needs and future plans while discussing their vessel needs. As a life philosophy we believe that relationships are more important than issues. In our relationship with employees, suppliers and clients, we endeavor to embody that great principle.
		</p><p>
			We look forward to building you a great boat.<br />
			The crew at Gold Coast Yachts, Inc.
		</p>

	<!-- #content --></div>
	
	<hr />

	<ul id="sideBar">
		<li>
			<a href="/catamarans.html">
				<img src="images/catamarans_thumb.jpg" alt="Day Sail Catamarans" />
				Day Sail Catamarans
			</a>
		</li><li>
			<a href="/yachts.html">
				<img src="images/cruisingYachts_thumb.jpg" alt="Cruising Yachts" />
				Cruising Yachts
			</a>
		</li><li>
			<a href="/guestShuttles.html">
				<img src="images/guestShuttles_thumb.jpg" alt="Guest Shuttles" />
				Guest Shuttles
			</a>
		</li><li>
			<a href="/ferries.html">
				<img src="images/ferries_thumb.jpg" alt="Ferries" />
				Ferries
			</a>
		</li><li>
			<a href="/snorkel.html">
				<img src="images/snorkel_thumb.jpg" alt="Snorkel Boats" />
				Snorkel Boats
			</a>
		</li><li>
			<a href="/dive.html">
				<img src="images/dive_thumb.jpg" alt="Dive Boats" />
				Dive Boats
			</a>
		</li><li>
			<a href="/party.html">
				<img src="images/party_thumb.jpg" alt="Party Cats" />
				Party Cats
			</a>
		</li><li>
			<a href="/response.html">
				<img src="images/yachts_thumb.jpg" alt="Response Vessels" />
				Response Vessels
			</a>
		</li>
	</ul>
	
	<hr />

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

<div id="footerWrapper"><div id="footer">

	<a href="http://www.abycinc.org/"	class="firstLogo">
		<img src="images/ABYClogoSm.gif" alt="ABYC Logo" />
	</a>
	
	<a href="http://www.abbra.org/" class="secondLogo">
		<img src="images/ABBRAlogoSm.gif" alt="ABBRA Logo" />
	</a>
	
	<ul>
		<li><a href="/index.html">Home</a></li>
		<li><a href="/about.html">Company</a></li>
		<li><a href="/brokerage.html">Brokerage</a></li>
		<li class="last"><a href="/contact.html">Contact Us</a></li>
	</ul>
	
	&copy; Gold Coast Yachts, Inc. All Rights Reserved.<br />
	
	<script type="text/javascript"> {PageLastUpdated();} </script>
	
	<div>
		Site design &amp; hosting provided by
		<a href="http://www.bigbluedesign.com">Big Blue Design</a>
	</div>
	
<!-- #footer, #footerWrapper --></div></div>

</body></html>
If I have time later I'll spend the ten to twenty minutes it should take to put together the CSS for that -- probably hit that after dinner.