Errata

With the style, the finished page makes it impossible to view the bottom of the bottom row of pictures when the browser height is small enough that the scroll bar appears (this on Safari, but I believe it would be generally true). I fixed it by adding a 24px bottom padding to the gallery.

The <meta> tag for the XHTML template code is incorrect as it has an extraneous quotation mark embedded in it.

It currently reads:
<meta http-equiv="Content-Type" content="text/html; charset="utf-8" />

It should read:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

111

the line below on page 47, under 16.

<p class="intro">

"You don't have to add a period before the word intro.."

should be changed to:

"You don't add a period before the word intro..."

This will not work: <p class=".intro">

The phrase "don't have to" suggests that the '.' will work but is not necessary when in fact the superfluous '.' is an error.

Paragraph after the Note box in the las 3 lines reading "... You can also apply class formatting to only part of a paragraph or heading by adding a <span> tag, as described in the box below."
There is no box below. Should it read Box in Page 54 Titled Gem in Rough - Divs abd Spans?

"This link points directly to an element with the ID of #R on the page index.html."

The ID is just "R"

I believe it should read...

"This link points directly to an element with the ID of 'R' on the page index.html."

Thanks,
Shawn Englerth
Web Architect
Coldwell Banker Residential Brokerage

Your example is intended to show how one group of links can receive font properties by virtue of having a different ancestor tag than other links on the same screen.

But the links appearing in the cutaway screenshot do not illustrate the value specified in the declaration block of the style appearing just above this screenshot. The links are shown as a serifed font in both instances but ought to appear in the Arial typeface ( a sans-serif typeface ) for the second, UL instance.

A very small point, but one, perhaps, that might cause some confusion.

So far, this book is EXCELLENT. Thank you very much for writing it.

selector_basics.html file exercise:
The code given for border-top: 2px solid #86A100; does not seem to work.
It seems to need the style as well and the following works:

border-top-style: solid;
border-top: 2px, #86A100;

The specificity of the 'p.intro' style is stated as 10. I think it should be 11.

It says in Figure 5-3...

"Each type of selector has a different value, and when multiple selector types appear in one style ? for example the descendent selector #banner p?the values of all the selectors used are added up."

'p.intro' has a tag selector (1 point) and a class selector (10 points) which gives an overall value of 11!

Conversely the text of Figure 5-4 would be correct if the 'p.intro' style was changed to just '.intro'.

As a general rule background colors of elements aren't inherited.
I applied background color to body tag and it got inherited by paragraph and other elements.

In the code for the descendent selector. It's states to use code #main.intro. While you really need to use code #main .intro. A space is needed between main and .intro

There is a missing property in body style(no bg color or bg image). I compared mine with finished version when I noticed mine had no background coloring. Fixed it by copy/paste from finished code.

The text says 'Click after the closing brace of the h1 tag'. I think it should be 'Click after the closing brace of the h1 style', or 'the #main h1 style'.

The margin-left value for #main .byline strong is 5 px, while the 06_finished version has
margin-left: 11px.
This gives different results comparing the two when you are done.

The explanation is just vice versa

Under "Formatting the Headings and Paragraphs" step 1, it says to add the ".main h1 {" after the body tag selector but the previous example was an html tag selector, not a body tag selector.

The correction posted by Amy Blassing and noted by the Author or Editor for page 216 contradicts both Figure 8-5 on page 195 and the W3C CSS 2.1 Specification.

Figure 8-5 on page 195: "The order in which you specify the keywords doesn't matter - top center and center top both have the same effect.

W3C CSS 2.1 Specification: If at least one value is not a keyword, then the first value represents the horizontal position and the second represents the vertical position.

Because both values are keywords both page 195 and 216 are correct and the correction submitted is wrong. Blassing refers to a tip page 234. This tip follows a paragraph describing placement using values other than keywords. In the context of values other than keywords, the tip is valid. However, it does not apply when both values are keywords as on page 216.

Confirmed Errata submitted by Amy Blassing:
Printed Page 216
Step 5 (line 4) reads "background-position: top left;"
The line should read "background-position: left top;" The TIP on the top of page 234 explains why. "Tip: In positioning background images, the first value is the horizontal placement (left to right); the second is vertical placement (top to bottom)."

Note from the Author or Editor:
page 216, step 5, 4th line of code should read
background-position: left top;

Amy Blassing

Last sentence should refer to horizontal nav bars, not vertical.

The following coding was left out:

.warning {
padding-left: 0;
background: white;
}

The tutorial called "Positioning Page Elements," which starts on this page, uses a file in folder 13 called "index.html." This file, in both the uncompleted, tutorial version, AND in the finished version, doesn't view correctly in IE8. In IE, the web page has a gray background that covers almost the whole page, and bisects the banner.

I checked the finished version because I thought I must have corrupted the code somehow in doing the tutorial to cause that.

The only part of the page that is white is the text part of the banner ("CosmoFarmer 2.0") and a small section at the far right end of the banner. Very weird. I cannot figure out why it is doing that.

I also use Firefox, and it looks fine there.

Super, super book.

Re: the errata reported previously - both the unfinished (tutorial) version of the "index.html" file and the finished version for Tutorial 13 display a gray background in IE8.

I was able to fix the problem by inserting "background-color: #FFFFFF" in the "body" style in the external style sheet. Dreamweaver argued with me a little, insisting that was the default color, but I just insisted back. :-)

I'm not certain that would be a real fix, or if the problem lies elsewhere. I searched through both style sheets (internal and external) and couldn't find that particular color used anywhere on anything.

Odd.

A selector is missing from the style. Without the descendant selector " #banner #logo ", a border in color #6F3BA4 will print around three sides of the logo. This occurs because the background color for the logo shows through the transparent portion of the PNG. This occurs if background printing is enabled in Firefox, Safari, and IE 8. If background printing is not enabled, you do not need any of the selectors.

The style should read: html, body, #banner, #footerWrapper, #banner #logo {
background: #FFF;
}

As noted in an earlier errata submission, there is no HTML element called "variable". Change to "var".

The example given for the "right" property is printed as:
Example: left: 5em;

This is incorrect because this is an example for the "right" property. It should be:
Example: right: 5em;

Border radius for the all the elliptical values is formatted incorrectly for two values. It should be formatted as 40px / 20px; NOT40px/20px;
And the same goes for all the other border values with two values (elliptical corners).