<div> errors within head errors

JavaScript
1

I have three errors upon validation.

You can see these pages at www.propertieswithstyle.com/cdmdata.html

The page renders well in Firefox, IE 8 and Chrome

See the

<div id=“nav”>
and
<div id=“maincontent”>

Then there is . . . img doesn’t have an attribute “name” in currently active versions XHTML 1.0 Strict

I would sure like to clean it up however.

Any ideas . . ?

Thanks . . . Rick



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Huntington Beach Real Estate &amp; Homes - Properites With Style, Inc.</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="Content-Language" content="en"/>
<meta name="description" content="Rick Schreiber, Properties With Style, Huntington Beach Real Estate, home values, real estate values, statistical analysis, median sales prices, average sale prices, historical real estate values, oceanfront homes, bayfront homes, local real estate broker, local real estate agent, local real estate office, pricing real estate, real estate values, luxury homes, upscale homes, orange county  short sales, foreclosure, REO, determining market value, listing and selling south orange county real estate, Aliso Viejo, Corona del Mar, Coto de Caza, Dana Point, Huntington Beach, Irvine, Ladera Ranch, Laguna Beach, Laguna Hills, Laguna Niguel, Newport Beach, Newport Coast, Rancho Santa Margarita, San Clemente, San Juan Capistrano "/>
<link type="text/css" rel="stylesheet" href="../css/homepage.css" media="screen,projection,tv"/>
	<div id="nav"> [COLOR="#FF0000"]<!--error - div not allowed within head-->[/COLOR]
  		<ul id="navli">
    		<li><a href="http://www.propertieswithstyle.com" title="HOME PAGE">Home Page</a></li>
    		<li><a href="http://www.propertieswithstyle.com/orangecountymap.html">Find Homes All Orange County</a></li>
    		<li><a href="http://www.propertieswithstyle.com/socomap.html">Find South County &amp; Beach Homes</a></li>
    		<li><a href="http://www.propertieswithstyle.com/cotomap.html">Search Homes In Coto de Caza Now!</a></li>
    		<li><a href="http://www.propertieswithstyle.com/socomap.html" title="Return To So. County List">Return to So. Orange County Search</a></li>
    		<li><a href="http://www.propertieswithstyle.com/cdcforestmap.html" title="The Forest">The Forest</a></li>
    		<li><a href="http://www.propertieswithstyle.com/cdclosranchosmap.html" title="Los Ranchos Estates">Los Ranchos Estates</a></li>
    		<li><a href="http://www.propertieswithstyle.com/cdcmeritagemap.html" title="Meritage">Meritage</a></li>
    		<li><a href="http://www.propertieswithstyle.com/cdcsocotomap.html" title="South Coto de Caza">South Coto de Caza</a></li>
			<li><a href="http://www.propertieswithstyle.com/cdcterracemap.html" title="The Terraces">The Terraces</a></li>
			<li><a href="http://www.propertieswithstyle.com/cdcvillagemap.html" title="The Village">The Village</a></li>
			<li><a href="http://www.propertieswithstyle.com/cdcdata.html" title="Valuation Charts">Quick Find Value Charts</a></li>
  		</ul>
	</div><!--eND of Nav-->
	<div id="maincontent">   [COLOR="#FF0000"]<!--error - div not allowed within head-->[/COLOR]
<!--picture program starts here-->
<script type="text/javascript">
<!--loads pics in cache-->
var image1=new Image()
image1.src="/css/images/.jpg"
var image2=new Image()
image2.src="/css/images/.jpg"
var image3=new Image()
image3.src="/css/images/.jpg"
var image4=new Image()
image4.src="/css/images/.jpg"
var image5=new Image()
image5.src="/css/images/.jpg"
var image6=new Image()
image6.src="/css/images/.jpg"
var image7=new Image()
image7.src="/css/images/.jpg"
var image8=new Image()
image8.src="/css/images/.jpg"
var image9=new Image()
image9.src="/css/images/.jpg"
var image10=new Image()
image10.src="/css/images/.jpg"
var image11=new Image()
image11.src="/css/images/.jpg"
var image12=new Image()
image12.src="/css/images/.jpg"
var image13=new Image()
image13.src="/css/images/.jpg"
var image14=new Image()
image14.src="/css/images/.jpg"
var image15=new Image()
image15.src="/css/images/.jpg"
var image16=new Image()
image16.src="/css/images/.jpg"
var image17=new Image()
image17.src="/css/images/.jpg"
var image18=new Image()
image18.src="/css/images/.jpg"
var image19=new Image()
image19.src="/css/images/.jpg"
var image20=new Image()
image20.src="/css/images/.jpg"
var image21=new Image()
image21.src="/css/images/.jpg"
var image22=new Image()
image22.src="/css/images/.jpg"
  </script>
  </div>
 </head>
<body>
	<div class="header">
    	<img src="../css/images/.jpg" name="slide" width="470" height="250" alt="picture slide show"/>
        [COLOR="#FF0000"]<!--error - img doesn't have an attribute "name" in currently active versions XHTML 1.0 Strict-->[/COLOR]
    </div>

<script type="text/javascript">
//variable that will increment through the images
var step=1
function slideit(){
//if browser does not support the image object, exit.
if (!document.images)
return
document.images.slide.src=eval("image"+step+".src")
if (step<33)//must represent No. of pictures in above cache NOT the header picture!//
step++
else
step=1
//call function "slideit()" every 6 seconds
setTimeout("slideit()",6000)
}
slideit()
</script>
<!-- here is where the main menu and the rest of the page code goes-->
  <div class="desc">Arguably the most eclectic collection of home styles and lifestyles. Set behind 24/7 guarded gates, Coto de Caza offers two excellent golf courses with many fairway home site communities and ultimate equestrian estates. The village is just as the namesake describes - a village, set among oak trees covered rolling hills with trails for equestrian, hiking, mountain bike riding or just strolling along with friends. There is no Mello Roos taxes in the Village! The sports park holds many activities throughout the year complete with baseball diamonds, sand pit volleyball courts and much more. Don't miss The Coto de Caza 4th of July Parade, it's a stunner every year.</div>
  <div class="mapname">
  	Corona del Mar Visual Market
  </div>
     <div class="desc">Understanding the macro and micro charts. Find the square feet of your home or the home you wish to purchase along the bottom of the macro or micro chart. (The micro offers better precision). Look straight up vertically until you intersect with either of the two curved lines, green for sold price and rust for available price. Look to the left or right of the chart for the dollar scales. This will indicate an approximate value (starting point) of the home based on house square feet, comparable sold properties and for-sale available home dollars, two of the most critical factors in evaluation and pricing. Remember, every home is unique! This data is based on specific cities or communities. If you would like to have a chart like this for your property or the property you’re purchasing, simply send us an eMail with your street address, city, zip code and the square feet of the home. We'll plot it on a chart and eMail it to you; only it will be larger than this chart.
  Questions? Please contact us at : <a class="test" href="mailto:propertieswithstyle@gmail.com"><span class="email">Properties With Style.</span></a>
  </div>
  <br />
  <div class="mapname"> Corona del Mar 4th Quarter 2011 Macro Chart </div>
  <div class="plate"><img src="../css/graphs/cdcmacro.gif" width="100%" height="600" alt="chart" /></div>
  <div class="mapname"> Corona del Mar 4th Quarter 2011 Micro Chart </div>
  <div class="plate"><img src="../css/graphs/cdcmicro.gif" width="100%" height="600" alt="chart" /></div>
  <div class="mapname"> Corona del Mar 13 Year Median Sale Prices </div>
    <div class="desc">What is median anyway? To truly understand Mean and Median you really have to look at all of the encompassing data bits. If you have a symetrical set of data, median (mid-pointe) and mean (average) can be very close indeed. However, if the data set is skewed, lets say, by an unusually high sale price, it enforces artificially high mean values with the resulting effect of over pricing. The opposite is true with a low sale price, under valued. Medians have less tendency to fluctuate with excessive real estate trends.</div>
  <div class="plate"><img src="../css/graphs/medianchart.gif" width="100%" height="600" alt="chart" /></div>
  <div class="mapname"> Corona del Mar 13 Year Average Rental Chart </div>
  <div class="plate"><img src="../css/graphs/cdcrents.gif" width="100%" height="600" alt="chart" /></div><br  />

  <div id="footer">
    	<hr />
    Properties With Style Inc., a Real Estate Corporation&copy;. The information being provided by CARETS (CLAW, CRISNet MLS, DAMLS, CRMLS, i-Tech MLS, and/or VCRDS) is for the visitor's personal, non-commercial use and may not be used for any purpose other than to identify prospective properties visitor may be interested in purchasing.

    Any information relating to a property referenced on this web site comes from the Internet Data Exchange (IDX) program of CARETS. This web site may reference real estate listing(s) held by a brokerage firm other than the broker and/or agent who owns this web site.

    The accuracy of all information, regardless of source, including but not limited to square footages and lot sizes, is deemed reliable but not guaranteed and should be personally verified through personal inspection by and/or with the appropriate professionals. The data contained herein is copyrighted by CARETS, CLAW, CRISNet MLS, DAMLS, CRMLS, i-Tech MLS and/or VCRDS and is protected by all applicable copyright laws. Any dissemination of this information is in violation of copyright laws and is strictly prohibited.

    CARETS, California Real Estate Technology Services, is a consolidated MLS property listing data feed comprised of CLAW (Combined LA/Westside MLS), CRISNet MLS (Southland Regional AOR), DAMLS (Desert Area MLS),CRMLS (California Regional MLS), i-Tech MLS (Glendale AOR/Pasadena Foothills AOR) and VCRDS (Ventura County Regional Data Share).
    Information of sellers and others have not been verified. Data maintained by the Associations or their MLS may not reflect all activity in the market. DRE License: 01408382.
   	  <hr />
    </div><!-- eND Footer-->
  </body>
</html>
<!--2/09/2012-->
2

The <div> errors are because you’ve got content before

</head>
<body>

That isn’t allowed. You’re only allowed content within <body>…</body>, not within <head>…</head>, exactly as the error message says.

Likewise, it isn’t happy about you including name=“slide” in the <img>, because ‘name’ isn’t a valid attribute. What more can I say except what the validator told you? You can’t use ‘name’ there.

3

You’ll find that the validator often gives pretty self explanitory reasons for invalidation.

I believe W3C also gives the option of giving you a tidied up version of the code you are working with, presumably with all the fixes you need. You can try that code out if you don’t know how to fix it yourself. Be wary though, if you have some complicated errors such as improper nesting or forgetting tags etc, then it can and most likely will get it wrong and you’ll still be left to fix it on your own :).

4

Really your markup makes no sense - not only is it non-semantic with DIV around obvious headings, DIV around obvious paragraphs, unclosed DIV, etc, etc… You’ve go so much improper placement of elements, attributes on tags that don’t have those attributes, elements where they can’t go structurally – it’s a miracle the page RENDERS…

… and that’s before we talk the pointless keyword stuffing in description (which is supposed to be a natural language description of the page, NOT stuffed to the gills with keywords that don’t even appear in the body text), illegible script font, illegible color contrasts between text and background…

Even just simple things like:

<img src=“css/graphs/cdmmicro.gif” width=“100%” height=“600” alt=“chart” />

Percent is not a valid value on the width attribute for images. You want to use % width on a image, you have to use CSS. Also not a great idea to declare a fixed height with a percentage width, since then you’ll have aspect distortion.

I’d have to throw out pretty much all the markup to even TRY to address the problems with that page.

If I have time tomorrow (pulling a fast fade here) I’ll see if I can do exactly that, with an explanation of the how/why/where of it.

5

BTW, your WOFF files are missing/404.

6

Blasted insomnia.

Ok, let’s dig into rewriting this and explaining the how/why/what/where – and why the problems your having are just a sign of your probably learning from the wrong source materials – again, not your fault, there’s a LOT of bad/outdated tutorials, books and advice… and many of them were released this past year.

One of the things I do in my approach is to write the ENTIRE HTML without even THINKING about the layout first… well, maybe a few extra containers I know i’ll need like div#sidebar, div#content, div#pageWrapper, but those are all pretty much static to every page. I do so using SEMANTIC markup – this means using heading tags for headings, paragraph tags for paragraphs (and random bits of text floating on their own aren’t paragrapgs), lists for lists, etc, etc… For now I’ll just use a placeholder div for the slideshow since to me that’s presentation, not content. We’ll deal with that later.


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

<meta
	name="description"
	content="Search or find Corona del Mar real estate. Fill this out the rest of the way with a natural language paragraph to be shown on your SERP."
/>

<link
	type="text/css"
	rel="stylesheet"
	href="screen.css"
	media="screen,projection,tv"
/>

<title>
	Corona del Mar Estates And Homes - Properties With Style, Inc.
</title>

</head><body>

<div id="pageWrapper">

	<div id="sideBar">
	
		<h1>Properties <span>With <span>Style</span></span></h1>
	
		<ul id="mainMenu">
			<li><a href="/">Home Page</a></li>
			<li><a href="/citysnapshots.html">Return To Cities List</a></li>
			<li><a href="/cdmmap.html">Find Homes In Corona del Mar Now</a></li>
			<li><a href="/socomap.html">Find South County &amp; Beach Homes</a></li>
			<li><a href="/orangecountymap.html">Find Homes All Orange County</a></li>
		</ul>
		
	<!-- #sideBar --></div>
	
	<hr />
	
	<div id="content">
	
		<div id="slideshow"></div>
		
		<p>
			CORONA DEL MAR - Known for its flower street names Corona del Mar is perhaps best personified as a sublime bedroom community. Behind it's village charm lies some of the most exclusive bluff top ocean and Catalina Island view real estate to be found &mdash; anywhere!  Corona del Mar is actually within the city of Newport Beach but truly has it's own special flavour, and zip code &mdash; 92625. Spectacular ocean, sunset, city lights and Catalina Island views abound in many of Corona del Mar's pristine neighbourhoods. The annual Corona del Mar Christmas Walk complete with carolers, is not to be missed. Corona del Mar is close to John Wayne Airport, Fashion Island Shopping Center, Newport Harbour with it's Christmas Boat Parade, historic Balboa Island and Balboa Peninsula. Many Newport Harbour and Corona del Mar homes have their own exclusive bay front dock. Most of the homes in the slide show above are within walking distance to Ocean Boulevard, or on Ocean Boulevard. It's eclectic!
		</p><p>
			Questions regarding Corona del Mar?
			<a href="mailto:propertieswithstyle@gmail.com" class="email">
				Please contact us at:
				<span>Properties With Style.</span>
			</a>
		</p>
		
		<h2>Corona del Mar Visual Market</h2>
    <p>
			Understanding the macro and micro charts. Find the square feet of your home or the home you wish to purchase along the bottom of the macro or micro chart. (The micro offers better precision). Look straight up vertically until you intersect with either of the two curved lines, green for sold price and rust for available price. Look to the left or right of the chart for the dollar scales. This will indicate an approximate value (starting point) of the home based on house square feet, comparable sold properties and for-sale available home dollars, two of the most critical factors in evaluation and pricing. Remember, every home is unique! This data is based on specific cities or communities.
		</p><p>
			If you would like to have a chart like this for your property or the property you're purchasing, simply send us an eMail with your street address, city, zip code and the square feet of the home. We'll plot it on a chart and eMail it to you; only it will be larger than this chart.
		</p><p>
			<a href="mailto:propertieswithstyle@gmail.com" class="email">
				Please contact us at:
				<span>Properties With Style.</span>
			</a>
		</p>
		
		<h2>Corona del Mar 4th Quarter 2011 Macro Chart</h2>
		<img
			src="images/cdmmacro.png"
			alt="Corona del Mar 4th Quarter 2011 Macro Chart"
			class="plate"
		/>
		
		<h2>Corona del Mar 4th Quarter 2011 Micro Chart</h2>
		<img
			src="images/cdmmicro.png"
			alt="Corona del Mar 4th Quarter 2011 Micro Chart"
			class="plate"
		/>
		
		<h2>Corona del Mar 13 Year Median Sale Prices</h2>
    <p>
			What is median anyway? To truly understand Mean and Median you really have to look at all of the encompassing data bits. If you have a symmetrical set of data, median (midpoint) and mean (average) can be very close indeed. However, if the data set is skewed, lets say, by an unusually high sale price, it enforces artificially high mean values with the resulting effect of over pricing. The opposite is true with a low sale price, under valued. Medians have less tendency to fluctuate with excessive real estate trends.
		</p>
		<img
			src="images/cdmmedian.png"
			alt="Corona del Mar 13 Year Median Sale Prices"
			class="plate"
		/>
		
		<h2>Corona del Mar 12 Year Average Rental Chart</h2>
		<img
			src="images/cdmrents.png"
			alt="Corona del Mar 12 Year Average Rental Chart"
			class="plate"
		/>
		
	<!-- #content --></div>
	
	<hr />
		
  <div id="footer">
		<p>
			Properties With Style&copy; Inc., a Real Estate Corporation . The information being provided by CARETS (CLAW, CRISNet MLS, DAMLS, CRMLS, i-Tech MLS, and/or VCRDS) is for the visitor's personal, non-commercial use and may not be used for any purpose other than to identify prospective properties visitor may be interested in purchasing.
    </p><p>
			Any information relating to a property referenced on this web site comes from the Internet Data Exchange (IDX) program of CARETS. This web site may reference real estate listing(s) held by a brokerage firm other than the broker and/or agent who owns this web site.
    </p><p>
			The accuracy of all information, regardless of source, including but not limited to square footages and lot sizes, is deemed reliable but not guaranteed and should be personally verified through personal inspection by and/or with the appropriate professionals. The data contained herein is copyrighted by CARETS, CLAW, CRISNet MLS, DAMLS, CRMLS, i-Tech MLS and/or VCRDS and is protected by all applicable copyright laws. Any dissemination of this information is in violation of copyright laws and is strictly prohibited.
    </p><p>
			CARETS, California Real Estate Technology Services, is a consolidated MLS property listing data feed comprised of CLAW (Combined LA/Westside MLS), CRISNet MLS (Southland Regional AOR), DAMLS (Desert Area MLS),CRMLS (California Regional MLS), i-Tech MLS (Glendale AOR/Pasadena Foothills AOR) and VCRDS (Ventura County Regional Data Share).
		</p><p>
			Information of sellers and others have not been verified. Data maintained by the Associations or their MLS may not reflect all activity in the market. DRE License: 01408382.
		</p>
  <!-- #footer --></div>

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

</body></html>

You’ll notice I’m particularly rabid about my formatting/indenting – clear code is easy to maintain code. I cut down the description tag, again that should be used for text to be shown ON your SERP… keyword stuffing it with zero relevance to the page will just get it ignored – basically try to write a simple 255 character or less description of what the page is in natural language.

A lot of your “problem” was the presence of normal ‘content’ markup – DIV, UL, etc, in your HEAD. The list of tags valid inside HEAD is pretty short – BASE, ISINDEX, LINK, META, SCRIPT and STYLE. That’s it, the only tags you can put between <head> and </head>.

The outer DIV#pageWrapper is for width constriction. BODY generally can’t be trusted to handle this, so an extra DIV makes it simpler.

DIV#sideBar is of course the side area with the menu in it. I added the site title as a H1 because you didn’t have a content element on the page suitable for the ‘topmost’ heading element… a key part of tying a page together. I’ll probably be axing the fixed background to get the filesizes down… the nested span inside should help me approximate the image appearance you were using.

UL#mainMenu is nothing fancy or too different from what you had, apart from losing a few titles – good rule of thumb is if you have to put a title attribute on a anchor, there’s something wrong with the content of that anchor.

closing DIV#sideBar you’ll notice my commenting style. Comments between sibling block level elements, ESPECIALLY if floats are involved can cause major headaches on some versions of Internet Explorer and Firefox. Simply moving the closing comment before the closing tag eliminates the possibility of tripping said bug. Also notice I use # or . when I do that to say if it’s a ID or class I’m closing, just like in CSS, and I do NOT say “end”… because really? </div> is the end of something? Never would have guessed.

You’ll notice a few horizontal rules thrown in – I do NOT use them for the presentation of drawing a line across the screen even if that’s their default appearance, in fact I hide them from my screen.css users… they are there semantically to indicate a change in topic or break between sections that don’t have headings – like between the menu and the content text, or after the last content section and the footer. “semantically” that’s what horizontal rules are for… something said in HTML 3.2, left out of 4 (funny since 4 was supposed to be about semantics and then they omit what half the tags are for) and one of the few things BACK in HTML 5 I actually endorse. A confession I’m sure will cause some heart palpitations out there given my ranting and raving about 5 being garbage.

DIV#content is just the content wrapper, again notice the formatting. Strict indents, extra linefeeds to make section changes clear – and people wonder how I can code without the acid trip color syntax highlighting eyesore… All this indenting and making sure block-level tag openings and long line openings are on their own lines means most of the time I don’t even NEED the validator for closing tags, because you can SEE them line up. This is particularly true of you have a good editor like notepad2 that gives you little guide-lines on your tabs so you can just trace the line down the code to make sure ‘yup, there’s a closing tag there’.

You were using DIV with classes on them for EVERYTHING – that’s just bad practice and quite nonsensical. You had paragraphs, wrap them in paragraph tags. Because they’re in paragraphs and all your para’s are pretty much the same, there’s no reason to be giving them classes!

The ‘questions’ anchors I did give a class to so as to differentiate them from other anchors on the page. I put the ‘please contact us’ text inside them so as to make it clearer what the link is actually to… I retained the spans though so that branding (using the fancy fonts or what-have-you) can be retained…

Finally we come to our first H2. Heading tags are used to indicate the start of sections of a page. H1 is the ‘root/trunk’ from which all other headings ‘branch off’… this is why you’ll hear people say you really should only have one H1 per page - trees with multiple trunks look funny and aren’t the norm. H2’s are by definition subsections of the H1 preceeding them – just as h3’s are subsections of the H2’s preceeding them and so on and so forth. This is why skipping to a H5 without a H4, H3 or even H2 before it is ‘gibberish’ – makes no sense… but you’ll still see people do it all the time because they choose their markup NOT based on semantics, but on the default appearance of the tags… which is NOT what HTML is for. It’s also why just stuffing heading tags around things for SEO is black-hat nonsense – and why having nothing but the same level heading tags back-to-back-to-back with no content (paragraphs, images, etc) between them is outright ignorant.

More paragraphs, nothing too fancy there…

Our next H2’s are followed by your plate images. They really do NOT need any extra wrapping elements around them as they’re just fine on their own. Giving them MEANINGFUL alt text is important, and given these are charts I’d be tempted to add the LONGDESC attribute to point at a file containing a raw text equivalent of that data for the people who can’t see it, or just for people who want to use it for something more than the IMG. Bit of work for that though, up to you really. Because you’re dynamcially sizing them I do not declare their width or height in the markup, and instead will use the .plate class for that. Oh, and .png is smaller for images that big.

Close out Content, horizontal rule to say #footer’s content is NOT part of the “12 year rental average chart” H2… and we have some paragraphs. you had them in the markup spaced apart, and to be frank the “lets make the text as tiny as possible and blur it all together” makes things look just a little too fly-by-night, so let’s actually treat them as paragraphs.

Close #pageWrapper, close BODY and HTML, done.

I’ll buckle down now and get started on the CSS – laugh, took me longer to write the explanation than it did to rewrite the page as valid markup…

Probably toss together a better slideshow script for you too - that one’s a bit iffy IMHO.

7

Ok, moving on, here’s what I came up with:
http://www.cutcodedown.com/for_others/RSchreiber/take2/template.html

As with all my examples the directory:
http://www.cutcodedown.com/for_others/RSchreiber/take2

… is wide open for easy access to it’s bits and pieces like the css.

I took a few styling liberties by upping the color contrasts to legible levels, adding that common heading to the page, fixing the paddings on the paragraphs, making the headings stand out a bit, etc, etc… I also did not use that ‘cicle_semi’ font because it renders illegibly on Windows systems. Looks decent in OSX, looks horrible on Windows. A lot of fonts are really meant for print, not screen use – the fancy serifs, excessively thin bars and loops, they just don’t work on screen. I kept “tangerine” for headings/brandings, but removed it from the menu. In the large sizes used on the H2’s their fine, but on the menu it made you have to squint and guess as to what it said – navigation should NEVER make people have to think, or squint. I also added a background to it and CSS3 border-radius – the background color non-hovered helps with legibility, the border-radius just softens it a bit. I kept your background-image hover, though I slide it in and out of position so it’s ‘precached’ – the way you were doing it you had to wait the first time you hovered for the background to show up… made things look a bit dated.

… and as you can see, I tossed together a quick/better slideshow that takes less markup; even uses that dummy div I put in place for it. Let’s cover that first.

I load the script in the HEAD so it’s ‘ready’ when we get to calling the initialization function.


<script
	type="text/javascript"
	src="slideshow.js"
></script>

Nothing fancy about that.

Calling it:


<script type="text/javascript"><!--
	/*
		slideshowLoad takes the following parameters:
			target container DIV id,
			path in which slideshow images are stored,
			an array of filenames in said path
	*/
	slideshowLoad('slideshow','slideshow/',[
		'cdmpicketfence.jpg',
		'cdmbelowstreetlevel.jpg',
		'cdmbigcorona.jpg',
		'cdmdowncoast.jpg',
		'cdmrickssold.jpg',
		'cdmswimmingcove.jpg',
		'cdmcottage.jpg',
		'cdmcustom.jpg',
		'cdmpalmcottage.jpg',
		'cdmocnviewcottage.jpg',
		'cdmcornerestate.jpg',
		'cdmpelicanrock.jpg',
		'cdmcustomestate1.jpg',
		'cdmmainbeach.jpg',
		'cdmflowerstreet.jpg',
		'cdmperchedoncliff.jpg',
		'cdmcustomcorner.jpg',
		'cdmpoppyave.jpg',
		'cdmtreelinest.jpg',
		'cdmreoestate.jpg',
		'cdmmodern.jpg',
		'cdmtreetrunk.jpg'
	]);
--></script>

… is also pretty simple. Comment says it all – first parameter is the ID of our div we want the images in, second parameter is the path to the directory in which all those images are contained, and the last parameter is an array of the image files you want from that directory.

The script itself is pretty simple:


/*
	Simple slide show
	Jason M. Knight
	March 4, 2012
*/

var
	slideshowTimer=3000,
	slideshows=[];

function slideshowLoad(targetId,directory,slideList) {
	var target=document.getElementById(targetId);
	target.slideCount=slideList.length;
	target.slideList=[];
	for (t in slideList) {
		target.slideList[t]=document.createElement('img');
		target.slideList[t].src=directory+slideList[t];
	}
	target.slideFrame=document.createElement('img');
	target.slideFrame.src=target.slideList[0].src;
	target.appendChild(target.slideFrame);
	target.slideCurrent=0;
	slideshows.push(target);
}

function slideRotate() {
	for (t in slideshows) { with (slideshows[t]) {
		slideFrame.src=slideList[slideCurrent].src;
		if (++slideCurrent>=slideCount) slideCurrent=0;
	}}
	setTimeout(slideRotate,slideshowTimer);
}

if (window.addEventListener) {
	window.addEventListener('load',slideRotate,false);
} else if (window.attachEvent) {
	window.attachEvent('onload',slideRotate);
}

Variable at the start to say how many milliseconds to wait between rotating the images, and an empty array that all of our ‘slideshows’ are kept in. This script lets you run MULTIPLE slideshows off this one library – just feed it another “slideshowLoad” pointing at another DIV with another list of files, and away it goes.

The load function pulls the target div, then extends that object with some more values. This lets us keep track of that div’s state without expanding into global variable-space. Just tack all our needed values onto the DIV’s object on the DOM. slideCount is how many, so we aren’t always having to check that value (.length on arrays is actually quite slow), slideList is an array containing all our IMG objects that are used to pre-cache the images without showing them… simple for loop through the list of filenames, create an IMG, tack it onto the list, set it’s SRC attribute equal to the directory+name. Once all of them are set up to be loading we make another IMG, give it the first image (so we don’t have to wait for onload to have the IMG in there) and insert it into our DIV with appendChild. Set the slide counter for this show to zero, and then push a copy onto our slideshows array.

The slideRotate function loops through all (one) of the slideshows you set up, uses ‘with’ to simplify the code (oh noes, not WITH! Some nubes to the coding scene seem to think WITH is the ultimate evil or something – because clear legible code is so undesirable)… We just set the src to the the current array index, then increment the value, looping if it ends up too big. (using the ++ construct in a manner that will also likely make some alleged experts get their panties in a wad – I’ve been at this thirty-five years I can’t believe some of the nonsense being spouted these days) – then we just set up a timeout so the function is called again when the timer runs out.

Which just leaves getting that routine called the first time – for which we trap onload. I put both ‘recent’ methods in there for good measure so it should work in just about everything IE 5.5 or newer. (No need for window.onload unless we REALLY care about going back in time a decade.)

So, script gets loaded in HEAD, before BODY is closed we call it to add all our elements to the DOM and set all those images up in the loading queue. Once everythign on the page loads the ‘onload’ trips calling our rotate function, which then sets up a timeout for itself. Simple.

On to the CSS – let’s break down the how/what/why of it. Follow along with the bouncing ball:
http://www.cutcodedown.com/for_others/RSchreiber/take2/screen.css

First up you’ll notice I don’t declare a character encoding – this is because anything other than 7 bit ASCII is invalid in CSS ANYWAYS – and since EVERY major character set shares the 7 bit ASCII in common, there’s no reason to EVER do that @charset bit on your CSS.

I put the font embed first – from what I can tell it seems to load cleaner/smoother/better if you do this; I think it starts it loading the files BEFORE applying any rules – delaying the reflow and making it go quicker.

Next is the standard reset I use. There are bigger resets like “reset reloaded”, but it keeps growing in size setting values that, well… don’t need to be reset or 99% of layouts won’t use – waste of time and bandwidth. There are smaller resets like the so-called ‘universal reset’ – * { margin:0; padding:0 } – but that can cause headaches with a number of elements, most notably forms.

The reset I use is less than a quarter K in size, so it’s not excessively large – it only targets the elements that NEED to be reset for most cases – the major semantic block level containers and a few inlines get margins nulled/padded, and strip the borders off images and fieldsets since those are inconsistenly applied. That’s what a reset is FOR, ‘resetting’ values that are different across browsers. When it comes to this reset – I’ve never needed more, I’ve never wanted less.

HR - as mentioned I put them in for semantics, then hide them from screen users. Rules aren’t consistent in accepting style across browsers anyways, so it’s just better this way.

body - set up an accessible dynamic font size (you were declaring px – bad for accessibility) with a nice tall line-height. This way large font/120dpi users (like myself) will get that automatic 25% enlarge, and the big line-height just makes things easier to read for everyone. I got rid of the massive fixed background as being problematic (and redunant with the H1 in place) for a simple 1280x1px repeat-y justified left. Smaller, faster, more reliable cross-browser. (fixed anything is usually a disaster)… The color set here is the default for every element on the page – and that’s one of the keys to good CSS… set things once on the outermost container, and let it trickle down to all the elements inside it.

#pageWrapper - simply sets up our width restrictions. IE6/lower will expand to full screen size, but I’d not be too worried about anyone using that being on too big a display. (I used to fret over it, not so much as 6/lower’s presence dwindles). The PX min-width lets us target most devices made in the past six years preventing it from getting so small as to break the layout, the EM max-width means people getting larger fonts by default can also have a larger maximum screen width. This is called a ‘semi-fluid’ layout and seems to be the best compromise between the accessibility TRAIN WRECK that are fixed widths, and the problem that people have with reading really long lines of text with a fully fluid design… it also opens the door to using CSS3 ‘media queries’ to target even smaller screens.

#sideBar - float it, set the width on it, pad it down from the top, nothing fancy.

h1 - pad one side, set the text nice and big in that pretty tangerine font. Because we’re in a fixed width area we pretty much HAVE to say PX on that, since EM’s would bust out of the container on large font systems… makes it easier to recreate the logo and besides, is ANYONE really going to kvetch over 48px being ‘too small’? I thought not.

I also gave all elements that use that script font (H1, email, H2) a little hint of ‘glow’ using text-shadow. It actually helps smooth out some of the jaggies from the piss-poor anti-aliasing common to web fonts, and looks nice too. IE9 and lower users won’t get that effect – big deal, it’s not a deal breaker.

h1 span,
h1 span span - these both get set to display:block setting them up on their own lines, and left padding 48px, recreating the appearance. The latter one of course getting set by the first one’s declaration. The negative margin top on the last one rides it up the screen a hair, tweaking the appearance slightly as the presence of that descender on the first line makes the large gap between the second and third line look larger than it is. Sometimes you have to fudge the math to make up for optical illusions.

#mainMenu – strip the bullets, margin all around to space it away from things. Nothing fancy.

#mainMenu li – padding the bottom instead of margins avoids some rendering headaches. Good rule of thumb, on elements that have unusual behaviors or positionings, avoid margins – REALLY true of LI, particularly in IE7… we dodge that bullet cleanly here.

#mainMenu a – block so we can set top/bottom padding on it, radius, color and backround are nothing too fancy… though I slide that background-image (remastered to be even smaller a file) over 320px so we can’t see it. That way when we get to:

#mainMenu a:active,
#mainMenu a:focus,
#mainMenu a:hover – we just change the color for people browsing with images disabled, then slide that image back into view with background-position. This means the image is loaded with all the others instead of it waiting to load until you first hover an item.

The border radius won’t show up in IE8/lower – OH WELL. Really with minor visual effects like that I don’t consider it a deal-breaker, and the various javascript shiv’s to try and make it work usually do more harm than good.

Content – I use overflow to make the content not indent beneath the floated #sideBar. If that wasn’t there everything from the H2 down would wrap beneath that side menu – we don’t want that. Legacy IE doesn’t do that with overflow, but has a thing called ‘haslayout’ that’s ‘triggered’ by certain properties… the easiest of which being zoom. Same top padding as the sideBar, and a right margin just to give it some breathing room when the screen is narrow.

Content a.email - color, pull the text-decoration, easy-peasy.

Content a.email span - sets the fancy font in a nice big size.

Content a.email:active,
Content a.email:focus,
Content a.email:hover - light it up when you hover it.

Content h2 – simple padding, alignment, and of course the massive rendering size and fancy font. I colored these a bit brighter to make them stand out more.

Content p – since we’ve stripped them of margins and padding, and already have plenty of room at the sides, all we need to do is add 1em of padding at the bottom. This is also nicer than the default margins because then we don’t have to even THINK about margin-collapse headaches.

Content .plate – the plate images are simple… set them to auto-size on width, do NOT attempt to set any height, that way they’ll keep the aspect ratio correct.

#footer - clear the floats to make sure the footer is past both content and sidebar, margins to push it into place… little bit smaller a font – and I went with arial because it’s easier to read at smaller sizes than most others. Top/bottom border does what you were trying to use HR for, without the cross-browser appearance woes.

#footer p – padding the top and bottom to half a EM gives us half a EM at the edges, with a full EM in-between them… looks good.

#slideshow – I put the script generated/controlled stuff last – you’ll notice everything before this was pretty much in source-order; it’s a great way to keep your layout straight, but some things really should be separate. Set a width, float it, margin it…

@media (max-width:900px) { #slideshow – Ok, this is a CSS3 media query for small displays. Displays that provide less than 900px of width make the wrapped text around the plate end up being a stupid one word per line – or worse start overlapping the image! By using a media query we can force the image to be shown as block instead of quote on those narrower displays, pushing the text down. Go ahead, resize your browser window to see this in action.

#slideshow img – I manually fix the size because your images, well – aren’t all the same size. Made the page jump around all crazy… so they end up resized… not a big deal.

Another possibility with the media query might be to make the browser shrink the image for them – but really when you get down narrower and narrower it often helps to pull the floats out of a layout entirely.

… and that’s it… one complete rewrite with a breakdown. Take your time, I know it’a s lot to take in all at once. I tried to document as fully as I could – but I’m sure you’ll have questions.

Valid XHTML 1.0 Strict, would be valid CSS 2.1 if not for a couple CSS3 properties, vendor specific prefix versions of said CSS3, and of course the IE specific ZOOM property – big deal. There’s NO excuse for invalid markup during the templating stage (no template survives contact with users and edits), but invalid CSS is a matter of knowing why something is invalid – if it’s vendor/browser specific, you can write it off as the price of reality; it’s still good to run a check though for the things that ARE actually a problem like typo’s.

Hope this helps.

8

deathshadow60 - I’m blown away! Stunned . . . .

This page is WAY better than mine.

http://www.cutcodedown.com/for_others/RSchreiber/take2/template.html

I’ve been very busy at work leaving me no time to cull through all you have written but I will.

I can’t thank you enough.

I will get to this as soon as I can and get back to you.

Thanks so very much.

Rick

9

Hello deathshadow60

I’m finally back.

I’ve been so frustrated waiting to get back to this and learn what you have sent me.

You have done so much with a lot less css and html. It’s amazing to me!

In the body you have font:normal 85%/150%
I’ve never seen this before. Can you explain it. I notice it used throughout the css page with different numbers.

I also notice that it appears that all of your widths are in pixels in lieu of ems or percentages.
Is this because they are in-line or block elements?

main menu . . . what is moz- webkit- ?

I’m going to try and substitute your css and html for my pages and see if I can learn anything

Thanks much.

Rick

OK . . . I’m getting more answers by reading each of your css calouts - body - pagewrapper . . . etc.

10

-moz- and -webkit- are vendor extensions that are solely engine specific code. It’s not CSS3 and it’s not valid. It’s basically a browser hack, if you would think of it like that.

font:normal 85%/150% is basically just 85% font size (separator / ) and 150% line height :slight_smile:

11

Which is why many of the bigger CSS3 properties end up being larger than i’d ever consider using on a page – to use ‘CSS3’ right now you pretty much have to NOT use valid code or even real CSS3. It’s stupid, there’s lots of debate about it…

Specifically -moz is for gecko based browsers like firefox, -webkit is for webkit browsers like Safari and Chrome… You can probably guess what -o and -ms are for; You’ll see the Opera and Microsoft ones less often, because Opera prefers NOT to use browser prefixes and instead use the actual SHOCK CSS 3 values, while microsoft… hasn’t really done a whole lot of bleeding edge stuff.

Which being set on body means it’s based on the browser default… which is NOT constant across all systems. I for example have my copy of windows seven set to “medium/125%” which under Win 95 through XP would be called “large/120dpi” and on Win 3.x was called “8514/large”… so my default 100% is 20px, not 16px…

Basically saying 85% font-size means 72-75 dpi users (real *nix default, some really old raster font only handhelds… original System 4/earlier Macs) will get 10px fonts, 96pdi (most people) will get 14px, 120dpi (many people with accessibility needs or high dpi displays… or both) will get 17px, and then 144dpi users (many media center machines) will get 20px… based on the 12/16/20/24 px defaults respectively.

One of the keys to accessibility is using font sizes that change automatically, so the user doesn’t have to dive for the zoom on every page. That’s why declaring fonts in PX should be done with an eye-dropper when you ‘have’ to like on image interactions or sticky footers – and NEVER on major “content” areas… It’s also a contributing factor to why fixed widths, fixed height containers, and a whole host of other ‘but I can do it in photoshop’ design elements aren’t actually viable for web deployment; no matter how many websites you see vomited up by photoshop jockeys throwing accessibility out the window by doing so.

… as to the 150% line-height, I just really like tall line-heights as I find it helps make things easier to read when the lines get long. The W3C suggested ‘default’ for browsers is 110% to 130%, most browsers use 120%, Gecko based browsers like Firefox seem to just pull a value out of it’s backside if you don’t state it.

Which is actually valid by the HTML spec, since the HTML spec isn’t there to say what ANYTHING actually looks like. That’s not it’s job.

12

I’m trying to understand the relationship of the #pagewrapper and the look and size of my two column page.

The side bar I understand.

This I don’t.

min-width:752px;
max-width:72em;

Obviously the 752 is a fixed with.

How does 72em relate the the page?

I need to know this I suppose to understand how content is inherited throughout the dependent elements.

Thanks . . . . Rick

Oh . . . my background image does not show at all.

13

The 752 is a pixel width yes. The ems are calculated based on the font size. Generally speaking 1 em = 16px. You can mess with the measurements to make it however big/small you need.

The min-width:752px makes it so without a doubt it’ll never go below 752px, and if the screen is bigger, it will expand up until 72em.

What background isn’t showing? Which element? Which browser (if there’s a specific one not showing it)?

14

Uhm… no. 752 is the smallest width the area is allowed to reach – it doesn’t “fix” the width, since it can still grow larger.

Depends on where it’s called and what the user has set for a default font size. EM’s are used so that fonts on the page automatically enlarge or shrink based on the browser default, which is SUPPOSED to inherit from the OS value, but some browsers (gecko and webkit) have always given accessibility the finger and ignore the OS, though you can set it manually in those browsers (on SOME OS. Webkit browser developers still have their heads in the sand going “all computers are 96 dpi, all computers are 96dpi”)

Basically I set the max-width, the largest size the content area is allowed to grow to, in EM’s so that it expands in size when users have larger fonts set by default.

As R Schreiber said, it kind-of starts out at 16px – but there is NEVER a fixed relationship between EM and PX, in fact that’s the ENTIRE REASON for using EM instead of PX is that they are NOT a fixed relationship. 1EM at BODY, is the same as the default font size – WHATEVER it is – could be 12px, could be 16px, could be 48px on a retina display for all we know.

In this case, its’ nowhere NEAR the 16px he said, since on BODY we declare 85% font-size. At 96pdi the 16px default * 85% * 72 EM gives a max-width of 979px… so for most users it’s the same as saying that… BUT, take a user like me where I’ve got the OS set to 120% and am using a browser that actually CARES about accessibility – Opera… for me the default size is 20px, not 16… 20 * 85% * 72 == 1224px.

So, for 96dpi users, the layout can expand and contract between 752 and 979px wide.
For 120dpi users, the layout can expand and contract between 752 and 1224px wide; which looks pretty good on my 1920x1200 displays.
At a whopping 144dpi (which some media center machines use) they can expand all the way out to 1468 wide.
Some big iron *nix desktops default to 75dpi, and some handhelds use 72dpi (and really old Mac’s) – making their max-width be 864px.

The point being that people with larger default fonts, might want or be able to use more width without the lines of text being too long should they have enough display to use it.

15

“Uhm… no. 752 is the smallest width the area is allowed to reach – it doesn’t “fix” the width, since it can still grow larger.”

That’s the first time I heard that it’s the smallest width and doesn’t FIX the width.

I’m using your (deathshadow60) css page and trying to apply it to my html page.

I’m understanding it more as I go along.

I’ve rendered an entire page using you’re css ideas and am really pleased with the results.

I’ve placed a chart on the page and it displays better than what I had going before. Seems to be quite clear now also.

Next I have to try out the slide show.

I have to float-right the slide show in the Content section. Is there a problem doing that?

One last item for now. Driving me nuts.

For the life of me I can’t get my background image to show at all. Nothing I’ve tried works.

I’ve tried placing it in the body and the pagewrapper. Nothing.

Thanks so much for your help - and Ryan also.

Rick . . .

16

It’s only because of the fact that the min-width property is being used, not the width property. The width property will fix it to 752px but the min-width will allow whatever size is available, and at a minimum, even if there isn’t enough room, it will make it 752px. The same logic is used for max width

For the life of me I can’t get my background image to show at all. Nothing I’ve tried works.

I’ve tried placing it in the body and the pagewrapper. Nothing.

Thanks so much for your help - and Ryan also.

Rick . . .

As for the background, what element is it on right now? I see a body background image, although that’s showing (Chrome) :). Again, what browser/what element has it currently? I checked both the wrapper and body since that’s what you referenced.

17

ie 8 and Chrome - no background-image: url(images/ceedees.png)

Thanks . . . Rick

18

That’s because, well, look at it:
min-width:752px;
max-width:72em;

Minimum width, maximum width… NOT just plain “width”

width:752px; – fixes the width to always be 752px

min-width:752px; – tells the element that it cannot shrink smaller than 752px

max-width:72em; – tells the element that it cannot expand larger than 72em – which works out to all those numbers I listed above.

Three different values. On my own pages I use them in concert with each-other, typically as:

width:95%;
min-width:752px;
max-width:68em; /* usually anywhere from 66 to 76em depending on page layout */

Which tells it the layout can’t go smaller than 752px, cant grow larger than 68em, but when possible should try to be 95% of the screen width. The technique is called a “semi fluid” layout – letting it grow and shrink between two extremes. Recently this powerful technique got a further shot in the arm with “media queries” where – in my pages at least – I’ve been adding a query to change the layout to single column with no floats when the width dips below that 752 width.

Should be fine – I beleive that’s what I did in my example.

One last item for now. Driving me nuts.

Should go on body – assuming the link is right you should be fine… do you have a link to a live copy of your current WIP? There are a few things that can throw you on images from CSS, but without seeing where you’re at on the rewrite (last link you had is still the old page) it’s hard to weigh in on the problem.

19

Try this . . .

http://www.propertieswithstyle.com/indextest.html

I like the look and the fixed menu with no background

I incorporated your css page and began to tweak it to taste but not sure about things.

Notice the footer. It is not aligned. I played with the #sidebar 300px and tried that with the footer. Incorrect but I don’t know enough to get it corrected.

The background image shows ok now. I tried fixed; and your top left repeat-y.

BOTH of these prevented the background image in the body to show.

So you were right, it’s in the css.

I threw a chart in this page to see how it lines up. In IE 8 it is beyond the right view port edge. In Chrome it’s ok.

Here is your css page and the subtle changes I’ve made.

Thanks . . . Rick



@charset "utf-8";
/* CSS Document */

@font-face {
	font-family:'tangerine';
	src:url('fonts/Tangerine_Regular-webfont.eot');
	src:url('fonts/Tangerine_Regular-webfont.eot?#iefix') format('embedded-opentype'),
			url('fonts/Tangerine_Regular-webfont.woff') format('woff'),
			url('fonts/Tangerine_Regular-webfont.ttf') format('truetype'),
			url('fonts/Tangerine_Regular-webfont.svg#svgTangerineRegular') format('svg');
	font-weight:normal;
	font-style:normal;
	font-variant:normal;
}

/* null margins and padding to give good cross-browser baseline */
html,body,address,blockquote,div,
form,fieldset,caption,
h1,h2,h3,h4,h5,h6,
hr,ul,li,ol,ul,
table,tr,td,th,p,img {
	margin:0;
	padding:0;

}

img,fieldset {
	border:none;
}

hr {
	display:none;
}

body {
	font:normal 85%/150% verdana,geneva,helvetica,sans-serif;
	color:#4DF;
	background-image: url(images/blueleftfade.png);
}

#pageWrapper {
	min-width:752px;
	max-width:96em;
}

#sideBar {
	float:left;
	width:280px;
	padding-top:2em;
	padding-right:1em;  /* I added this right padding */

}

h1		{
	padding-left:28px;
	font: 48px/52px tangerine,arial,helvetica,sans-serif;
	color:#4DF;
	text-shadow:0 0 8px #ADF;
}

h1 span {
	display:block;
	padding-left:48px;
}

h1 span span {
	margin-top:-6px;
}

#mainMenu {
	list-style:none;
	margin:1em;
	position:fixed;
	line-height:60%; /* I added line height */
}

#mainMenu li {
	padding-bottom:0.16em;
}

#mainMenu a {
	display:block;
	padding:0.5em 1em;
	text-decoration:none;
	color:#4df; /*#8DF;*/
	/*background:#012  320px 0 repeat-y;*/
	-moz-border-radius:0.5em;
	-webkit-border-radius:0.5em;
	border-radius:0.5em;
}

#mainMenu a:active,
#mainMenu a:focus,
#mainMenu a:hover {
	background-color:#048;
	background-position:0 0;
	background-image:url(images/menubkrnd2.png); /* I added this */
}

#content {
	overflow:hidden; /* prevent indent after floated #sidebar */
	zoom:1; /* trip haslayout, prevent indent legacy IE */
	padding-top:2em;
	margin-right:1em;
}

#content a.email {
	color:#ADF;
	text-decoration:none;
}

#content a.email span {
	font:normal 200%/120% tangerine,arial,helvetica,sans-serif;
	text-shadow:0 0 8px #ADF;
}

#content a.email:active,
#content a.email:focus,
#content a.email:hover {
	color:#FFF;
}

#content h2 {
	padding:0.3em 0 0.2em;
	text-align:center;
	font:normal 300%/120% tangerine,arial,helvetica,sans-serif;
	color:#ADF;
	text-shadow:0 0 8px #ADF;
}

#content p {
	padding-bottom:1em;
}

#content .plate {
	display:block;
	width:100%;
	margin-bottom:2em;
}

#footer {
	clear:both;
	margin:1em 1em 1em 300px;
	font:normal 90%/150% arial,helvetica,sans-serif;
	color:#FFF;
	border:solid #FFF;
	border-width:2px 0;
}

#footer p {
	padding:0.5em 0;
}

#slideshow {
	width:450px;
	float:right;
	margin:0 0 0.5em 1em;
}

@media (max-width:900px) {
	#slideshow {
		float:none;
		display:block;
		margin:0 auto 0.5em;
	}
}

#slideshow img {
	width:450px;
	height:270px;
}
20

What I’m trying to understand with the css is the content and footer div.

Right now they are different widths.

The footer seems wider than the Content width.

I tried placing the content div AFTER the footer thinking that the content div would then align the footer widths also but this actually reduced the footer width to less than half of what it should be. So that failed.

If I remove the footer div then the entire page is correctly aligned but the footer text has inherited the body size font and color.

Is it the actual width of the chart that is throwing the page out of whack?

I thought that the content div would prevent any widths from extending beyond the content div settings.

Am I in la la land . . . ?

Thanks much . . . Rick