Errata

page 57, figure 4-8

"Catering", as used on page 53, figure 4-1,
is replaced by "Catering Services" on page 57

Note from the Author or Editor:
This is an inconsistency that could be fixed. In the code in Exercise 4-2, delete "Services" after the word "Catering midway down.

a:focus instruction for #img3 reads "#img2". Same for #img4. Each should have its correct image number.

Note from the Author or Editor:
Yep! Copy and paste error! In the code at the top of page 417, change "img2" to "img3" for the third a:hover and change "img2" to "img4" for the fourth a:hover.

Rubber Soul was released in 1965 not 1968.

Note from the Author or Editor:
HA! Indeed! Rubber Soul was released in 1965. Good catch.

I will send a new screenshot for page 139 to production. Please also change p.564 in Appendix A to change the date for Rubber Soul to 1965.

Just before exercise 13-5 you write "Let's use the shorthand font property to make some changes to the h2 headings" But the exercise is to rewrite the h1 style rules using a font property instead with the goal to make it look as it did before.

Note from the Author or Editor:
The last line before the exercise should say "h1" instead of "h2"

In the first paragraph of exercise 12-3, you write "I'm also not going mark them..." You forgot a word. It should be "I'm also not going TO mark them..."

I'm using the Kindle version which doesn't provide page numbers, so I provided the location number.

Note from the Author or Editor:
Exercise 12-3 text: 4th sentence should read:
"I'm also not going to mark..."

"...page have followed the syntax shown in Figure 4-1". The figure should be 4-6.

Note from the Author or Editor:
I believe we caught and fixed this error in a previous reprint.

"DTDs" at the end of the page is repeated at the top of page 186.

Note from the Author or Editor:
I don't have this problem in my printing of the book. Production, could you check the most recent files and see if the word DTDs is repeated, and if so, delete the one that causes the least amount of ripple effect on the page.
Thank you.

Very minor typo:

Name is printed as "Tony Quartorolo", when it should be "Tony Quartarolo".

This typo shows up in the index as well under "Q".

Note from the Author or Editor:
Please change "Quartorolo" to "Quartarolo" on both pages.

The paragraph ends with "We'll talk". What should go here?

Note from the Author or Editor:
The missing text is "about the results in the following section."

This was fixed in an earlier reprint, I believe. Please confirm.

Change "Kaufmann" to "Kaufman"

The "Responsive Data Tables" link is printed as "css-tricks.com/9096-responsive-data-tables." The correct link, at least currently, is "http://css-tricks.com/responsive-data-tables/" (That is, no "9096-".)

For what it's worth, css-tricks.com embellished on this original post with a later "roundup" post, which you can find at http://css-tricks.com/responsive-data-table-roundup/.

Note from the Author or Editor:
In the Trouble with Tables sidebar, please delete "9096-" from the URL in the 2nd paragraph as noted in the submitted errata. Link should be:
css-tricks.com/responsive-data-tables

Figure 2-1 shows the directory as "2011".
Two paragraphs that follow have updated the directory to "2012".

Note from the Author or Editor:
As noted, there is a mismatch between the figure and the text. The figure should also say "2012" instead of "2011".

This could be in the OTHER formats as well --

There is NO 'example code' in the Description area of the :target -- instead, it looks like what should have been the 'example code' was instead included in the :hover Description box by mistake.

Note from the Author or Editor:
Confirmed. Move the example "h1:target {color: green;}"
from the last line of the :hover row to below the description in the :target row.

The phrasing elements section lists both subscript and superscript as "sub". superscript should be "sup".

Note from the Author or Editor:
This was fixed in an earlier reprint.

"Extra credit: Just the paragraph that appears after the 'main' section"

should read

"Extra credit: Just the paragraph that appears after an h2"

Note from the Author or Editor:
change answer g. on p.570 to read:

Extra credit: Just the paragraph that appears after an h2 (hint: this selector will not work in Internet Explorer 6): h2 + p {color: red;}

In the sentence defining media types, either 'screen' is written twice or there is an incorrect comma between 'projection screen'.

Note from the Author or Editor:
In the second paragraph, line 3, please change the first word "screen" to "speech"

The first line of sample code is missing a colon after the word "entry" (if it's supposed to match what's seen in figure 9-3).

Note from the Author or Editor:
To match Figure 9-3, please add a colon after "entry" in the first line of code in the example.

In the second to last line of the code sample for FILE SELECTION CONTROL, should the second <label> tag be a closed tag (i.e. </label>).

I'm still learning this stuff, and I just want to be clear....

Note from the Author or Editor:
Yes! Change the <label> tag in the second to last line of code to a closing tag: </label>

In the code, the text for the caption is "Nutritional Information (Calorie and Fat Content)", but in the visual sample accompanying this code, the words "(Calorie and Fat Content)" are omitted.

Note from the Author or Editor:
Confirmed. I believe this was fixed in the first reprint by removing the phrase "(Calorie and Fat Content)" from the code example.

the "svg for u" graphic is in figure 21-31 not figure 21-30 as stated.

Note from the Author or Editor:
In the exercise 21-3 on p.538, 2nd paragraph, change "Figure 21-30" to "Figure 21-31"

URL is incorrect. In the book it's www.learningwebdesign.com/4e/materials/chapter04/bistro, but the actual URL is http://www.learningwebdesign.com/4e/bistro/

Note from the Author or Editor:
The correct, working URL is:

www.learningwebdesign.com/4e/materials/chapter04/bistro

In the first printing of the book, the "materials/" directory had been omitted, but it has been fixed in a subsequent reprint.

Number 1 in the exercise states to add the image purpledot.gif, then within the example, in blue, it puts the correct file name with the .png ending.

Within the downloadable files, the file type is a png file.

Note from the Author or Editor:
In Exercise 13-1, step 1., change "purpledot.gif" to "purpledot.png'"

In the code example, the image file name should end in .png:
so...

background-image: url(two_cols_3000px.png);

word that is being changed by the example "image replacement" is Jenware not Jenville.

Note from the Author or Editor:
In first full paragraph, 4th line, please change "Jenville" to "Jenware".

Section text in footer reads "Part III, CSS for Presentation" but should read "Part II, HTML for Structure" since it is in that section.

Note from the Author or Editor:
I don't know whether this was caught in the first reprint. Please make sure that running feet in this chapter point correctly to Part II.

On the first line there's an 'iss' instead of 'is'. Unless that is a reference to the international space station.

I love this book. Many thanks.

Note from the Author or Editor:
On page 158, 4th paragraph, please change "iss" to "is"

"contact.php" should read "contest.php"

Note from the Author or Editor:
I believe this has already been fixed in the first reprint.

Figure 5-9 ...last example should read..."when checking out of the hotel"...instead of ..."when returning the car"

Note from the Author or Editor:
Yep, the figure does not match the code example in the flow of text. Please change the code example at the top of page 87 to read:

<p>When returning the car, ...

Hi,

provided that I have only access to the "Safari Books Online" edition, I just can't provide an accurate page number for the issue. I've typed in 600, because it is approximatively in the end. More precisely it is located in the Appendix B (CSS3 Selectors) in the fourth table, titled "Pseudo-class selectors".

If you look at the line referencing the ":first-of-type" selector, the produced example is "dt:only-of-type {font-weight: bold;}". It is expected, I guess, to have an example referencing ":first-of-type" here. :-)

If you look in the line referencing the selector ":only-of-type" the issue is the same kind, but reversed with ":first-of-type".

Also: I did not take the time to check every item on this page.

Regards
Yves

Note from the Author or Editor:
This was already corrected in the first reprinting.

For the online record, the :only-of-type entry should have the example dt:only-of-type {font-weight: bold;} (not :first-of-type)

At the end of the 2nd to the last paragraph, it states "Our example uses the POST method, as shown here:" and then shows an example form element which has an action value ending with ".pl" (which is a Perl file). However, the example being referred to uses a ".php" file, as shown on page 149. The ".pl" filename extension is not mentioned in the list of scripting/language technologies at the top of page 150.

Note from the Author or Editor:
Confirmed. In fact, this whole line was erroneously carried over from the previous edition, so the new line should read as follows:

<form action="/mailinglist.php" method="POST">...</form>

Change the pathname and file extension on the example on page 151 as well.

Author says that image file is named "source.jpg" whereas subsequently in example, it is referred to as ""stratocaster.jpg".

So "source.jpg" should be changed to ""stratocaster.jpg" in line 4 first para.

Note from the Author or Editor:
In first paragraph, last line, "source.jpg" should be "stratocaster.jpg"

The bottom note in the sidebar on page 70 refers to another sidebar later in the chapter called "Sectioning Content". However, there is no sidebar by that name in the chapter. I think the note on page 70 is really referring to the "Sectioning Elements" sidebar on page 81.

Note from the Author or Editor:
Please change "Sectioning Content" Xref to "Sectioning Elements" in the bottom note. This may have been fixed in the first reprint.

In figure 2-4, the image on the left uses "browser-default" style instructions, while the image on the right uses "custom" style instructions. However, the descriptive paragraph above the images states that the browser-default display is used in the image on the right.

Note from the Author or Editor:
The screenshots are in the wrong positions, but this has already been corrected in the first reprint.

Book says:

...
a:hover #img3, a:focus #img2 {

....
a:hover #img4, a:focus #img2{

I presume these a:focus #img numbers should match the a:hover numbers, so that the image does these things on both hover & focus.

Note from the Author or Editor:
There is an error in the code. the 3rd line beginning "a:hover" should end with #img3 (not #img2) and the 4th example should end with #img4 (not #img2)

For this last comment I just want to say first that the author has a special gift for writing and explaining this material. I absolutely love reading this book.

This submission may not be an error at all, and just the way the author wanted it to be. In Figure 6-10, The "about.html" is in bold, and maybe it shouldn't be.

Note from the Author or Editor:
Please change Figure 6-10:

"about.html" should not be bold
"salmon.html" SHOULD be bold (it is the target of the link)

in the 1st paragraph, 4th sentence, the <li><a href example, reads "Couscous with Peas and Mint"

in Figure 6-7, the <a href example reads "Couscous"

Note from the Author or Editor:
Please correct the code example in Figure 6-7 so it matches the code in the text:

<a href="recipes/pasta/couscous.html">Couscous with Peas and Mint</a>

(it will have to break to a second line after "Couscous" and the figure will get a little taller, and the caption & exercise will need to move down.)

second paragraph, the <a href ... reads "About the site"

in Figure 6-5, the <a href ... reads "About this page"

Note from the Author or Editor:
Please update Figure 6-5 to say "About the site..." in the code example in the lower-left.

This may not be a mistake at all.

in Figure 6-4, the diagram it reads "linguine.html"

in the Mac OS Finder structure, it reads "linguine.htm"

Note from the Author or Editor:
Confirmed! Sending a second screenshot that fixes both errors.

in Figure 6-4, the diagram shows "spoon.gif",

and the Mac OS Finder structure diagram shows "star.gif" instead of "spoon.gif"

Note from the Author or Editor:
The directory should show "spoon.gif". I will send a replacement screenshot directly to Rachael for inclusion in the reprint.

words needs to be changed

in the third paragraph, the list item, "The Food Network" is liked to the site "www.foodtv.com"

and in the second <li> example, "The Food Network" is lioked to the site "www.foodnetwork.com"

Note from the Author or Editor:
In the 2nd paragraph after Linking to Pages on the Web", change "www.foodtv.com" to "www.foodnetwork.com"

on the <ruby> example, for both the "han" and the "zi" example, at the end of the example, a slash needs to be added to read </rp>

just a comment, I could not find the whatwg.com website, so I went to the www.w3.org/tr/ruby 1.2.2 Simple Ruby Markup with Parentheses insteadto find this information.

Note from the Author or Editor:
Yes!

Close the final <rp> at the end of each code line: <rp>)</rp>

On page 88, the last sentence reads "This font is free for commercial use."

and on page 89, in Figure 5-10, the last sentence has the words "personal and" added - to read "This font is free for personal and commercial use."

Note from the Author or Editor:
Change Example for the small element to match Figure 5-10:

(first, delete the Download Jenville Handwriting Font)

<p><small>This font is free for personal and commercial use</small></p>

an explanation point used instead of a period.

on page 88, under i, the example ends with a period and on page 89 in Figure 5-10, the second sentence ends with an explanation point

Note from the Author or Editor:
Change period to an exclamation point in the Example for the i element.
"... a new personality!</p>"

under the u, for the Example: <p>New York.... the / for the </p> is missing at the end of the example.

Note from the Author or Editor:
Close the paragraph tag at the end of the sentence. (</p>)

in 5th paragraph, under <nav>, the first link and the last link are missing the < for the </li> at the end of the link.

Note from the Author or Editor:
Add "<" in front of "/li>" for first and last items in the list.

perhaps this is not an error at all.

in sidebar
for <figure>...</figure> instead of Contact information, should it read something like Figure content Information

for <figcaption>...</figcaption> instead of Contact information, should it read something like Figure caption information

Note from the Author or Editor:
Under <figure> text should read:
Related image or resource

Under <figcaption>, text should read:
Text description of a figure

very minor, maybe meant to be this way.

in the <blockquote>, 3rd paragraph, there are dashes ...the score is written down - and it's not something that is tampered with - and yet, each conductor ...

and in the Figure 5-7 period and comma have been used instead of dashes and the word "and" has been removed ...the score is written down. It's not something that is tampered with, and yet, each conductor ...

Note from the Author or Editor:
Add period after "down". Delete dash. Capitalize "It's" to match the figure.

In Figure 6-3 caption, please delete "Finished" and insert "The" (this is actually the "before" shot)

page 57, step 4, third line,.

informatino about the character encoding <meta charset="utf-8">

(correction) INFORMATION about the character encoding <meta charset="utf-8">

(change the word INFORMATINO to INFORMATION)

Note from the Author or Editor:
make change as described (this was caught by other reviewers as well)

On page 57, step 4, first sentence.

4. Next, created the document head that contains the title

(correction) 4. Next, CREATE the document head that contains the title

(change word CREATED to CREATE)

Note from the Author or Editor:
make change as described.

the first sentence in the first paragraph under "The Restaurant"

offers casual lunch and dinner fare in hip atmosphere.

(correction) offers casual lunch and dinner in A hip atmosphere.

(add the letter A in the sentence, so it matches figure 4-5 on page 54 and figure 4-8 on page 57)

Note from the Author or Editor:
Please add "a" as indicated in first paragraph under The Restaurant ("in a hip atmosphere")

nuts and bolts, I want introduce some Big Concepts

(correction) nuts and bolts, I want TO introduce some Big Concepts

(add TO to the sentence)

Note from the Author or Editor:
Please add "to" as indicated.

On the top of page in bluish box labeled Server Contents AND above step 5, part of step 4.

Kitchen.gif should possibly be labeled

Foods.gif

(change Kitchen.gif to Food.gif)

Note from the Author or Editor:
For consistency with prior examples, please change both instances of "kitchen.gif" to "foods.gif" (in blue box and next to bottom left-pointing arrow).

On Page 27, Figure 2.3, at the top of the page in the paragraph in the body of Jen's Kitchen, first sentence.

would like to find out about of some of the best restaurants

(correction) would like to find out about (delete OF) some of the best restaurants

(delete the first occurance of the word OF in the sentence.)

Note from the Author or Editor:
Drat, we'll need to correct this figure. Remove the word "of" after "about" in the code example (in the first <p>). The "of" in the screenshot at the top can just be photoshopped out easily. No need to remake the whole screenshot.

The cross reference should be to Figure 21-28 (not 21-26)

The cross reference should be to Figure 12-13 (not 12-14)

The reference should be to Exercise 12-6 (not 12-2)

Delete the word "a" in the second sentence:

should be:

"... you'll need to use CSS rules if you want..."

not:
"... you'll need to use a CSS rules..."

Materials, LWD4e_chapter06,Exercise 6-8, file glossary.html is invalid. At line 112, the dd element is terminated by </dt> instead of </dd>.

Note from the Author or Editor:
This is a problem with the file on learningwebdesign.com, not in the printed book itself. I will take care of it.

the Impact font is misspelled in the Fantasy row.

Note from the Author or Editor:
Please change label to "Impact" on bottom row of Figure 12-2.

"Figure 8-7. Practice column spans by writing the mvwarkup for this table."
should be:
"Figure 8-7. Practice column spans by writing the markup for this table."

Note from the Author or Editor:
omg. This was not in the files I sent. Please make this change.

"When link to a file in the same directory, you only need to provide the name of the file."
should be:
"When you link to a file in the same directory, you only need to provide the name of the file."

Note from the Author or Editor:
Insert "you" into second sentence as described ("When you link...")

in the code depicting the copyright special characters,
the year provided (2012) does not match the year shown in Figure 5-17
(2007).

Note from the Author or Editor:
I'd like to change the figure to 2012, but if it's easier to change both instances of "2012" in the text, just go ahead and change it back to 2007.

"One might use it to call out a search term in a page of results, to manually call attention to a passage of text, indicate the current page in a series."
should probably be:
"One might use it to call out a search term in a page of results, to manually call attention to a passage of text, or to indicate the current page in a series."

Note from the Author or Editor:
Insert "or to" before "indicate the current page..." as indicated.

Page 88, in the strike-through example, no semi-colon is needed
in the CSS Property description.

Note from the Author or Editor:
This isn't incorrect, but it is inconsistent with the other examples. Please delete the semicolon after "line-through" in the s example.

"The strong element indicates that a word or phrase as important."
should be:
"The strong element indicates that a word or phrase is important."

Note from the Author or Editor:
Please change "as" to "is" in the first sentence under "strong" as indicated.

"Flash is used for create full-screen animation?"
should be:
"Flash is used to create full-screen animation?"

Note from the Author or Editor:
Change "for" to "to" in the second sentence of the Flash sidebar.