Errata for CSS3: The Missing Manual

On http://oreilly.com/missingmanuals/cds/css3tmm3/, the link for http://css-tricks.com/convert-menu-to-dropdown/ from ch. 14 is missing the hyphen at the start (css-tricks) and so doesn't take you to the right page. Also, can't someone spice up the CSS a bit for the link listing page? Larger chapter titles & extra margin before them to make them stand out, reduce the spacing between the bullet points, etc.? The whole page just kind of blends together, and not in a good way. This is related to a book on how to do great CSS, so it's surprising that this page doesn't look better.

Note from the Author or Editor:
This is a problem on this web page (not in the book itself) http://oreilly.com/missingmanuals/cds/css3tmm3/

Second sentence: "It lets you divide a single element ... into a three, four, or more columns." Should be "into three, four or more."

Note from the Author or Editor:
remove the "a" in "into a three, four, or more columns."

URL at end of last pgh. needs updating. Should probably be: http://www.creativebloq.com/css3/get-more-out-your-css-transitions-jquery-3126395

Note from the Author or Editor:
Update URL at the end of the Box to: http://www.creativebloq.com/css3/get-more-out-your-css-transitions-jquery-3126395

"The buttons on the page are contained inside a HTML 5 nav element." Should probably be "inside AN HTML5... ."

Says “basic a tag styles.” Should be “basic <a> tag styles.”

The finished nav_bar_horizontal.html file has the misspelling “experLink.”

Note from the Author or Editor:
Step 7, line 3 of code, change "experLink" to "expertLink"

Says: “It will apply to all <a> tag…” Should be “tags.”

Note from the Author or Editor:
Setp3, second sentence of paragraph following the step change "It will apply to all <a> tag..." to "It will apply to all <a> tags.."

Says: “The first---using the display:inline-block property…” The first method described in Step 2 on page 308 is inline, not inline-block.

Note from the Author or Editor:
change "using the display: inline-block property" to "using the display: inline property"

If we read this page top to bottom, then we’ve already started reading the “Horizontal Navigation Bars” section by the time we get to this box. So it’s confusing that the beginning of the box text assumes, without saying so, that it’s talking about a vertical bar. I suggest starting off the box by clarifying that you’re talking about vertical bars first.

Note from the Author or Editor:
change the first sentence of the sidebar box to: In a vertical navigation bar, if the buttons touch, you'll see a double border between two buttons.

Says: “Start by removing the link entirely (2, 3, 4).” First, the link isn’t being removed; it’s the line. Second, the fourth image is not an example of an entirely removed underline. Or, at least, it wasn’t included in the “Remove the underline entirely” section on page 297.

Note from the Author or Editor:
Figure 9-1 second sentence should read: "Start by removing the underline entirely (2,3) and replacing it only when the visitor mouses over the link (4).

Says “bottom image of Figure 8-23.” Should be “right,” not “bottom.”

Says “Figure 8-23, top.” Should be “left,” not “top.”

“bg_ex” should be “03_bg_ex.”

Note from the Author or Editor:
step one change bg_ex to 03_bg_ex

“gallery_ex” should be “02_gallery_ex.”

Note from the Author or Editor:
last sentence on page 281 should read You can find a completed version of this tutorial in the 08_finished-->02_gallery_ex folder.

Says: “you’ll wrap this tutorial up in two steps.” Should be “three steps.”

The img tag should not have a space between the slash and “images”.

Note from the Author or Editor:
2nd line of code in step 1: no space between / and images. should be <img src="../images/dandelion.jpg ...

Says: “02-->gallery_ex.” Should be “02_gallery_ex.”

Note from the Author or Editor:
in step 1, replace second arrow (between 02 and gallery_ex) with underscore: 02_gallery_ex

Says: “the visual differences are accomplished by using different background images.” Well, SOME of the differences are due to different background images. There are a lot of other styles employed, though, like different font styles, different margins, etc. I’d change it to “the main visual differences” or equivalent.

Note from the Author or Editor:
second to last sentence of second-to last paragraph on page 240 should read The HTML for both the pages shown in Figure 8-1 is exactly the same; the most striking visual differences are accomplished by using different background images.

"roots" should be "root".

Top of page, first pgh. after code: "The CSS varies a bit depending on whether you want a horizontal of vertical navigation bar." Should be "OR vertical navigation bar."

Last sentence reads "See the note on page 303 for the reason for this and one possible workaround." The reference should be to page 310, not page 303.

Note from the Author or Editor:
Change last sentence in Figure 9-6 beginning with "See the note on page 303…" Change to: "The reason for this gap is described at the bottom of page 309." There is no Note that explains this -- it's actually described in the text at the bottom of page 309

Mentions a green border twice. Per page 226, it’s dark gray, not green.

Note from the Author or Editor:
"the green border surrounding the body" should be "the grey border surrounding the body" AND "if it touched the green border" should be "if it touched the grey border"

Only the margin declaration should be bold.

Note from the Author or Editor:
only last line of code in step 4 should be bolded

First, there is an unnecessary blank line in the code. Second, the color value unnecessarily switches from RGB to hex (compared to Step 1).

Note from the Author or Editor:
Pages 230-231 code insteps 2, 3 and 4: the color property (line 7 in each code example) should read: color: rgb(133,161,16);

Says “after completing Step 3 above.” Should be Step 4. The point is to see the color in the body tag without the color in the html tag. This can be done only after the color is added to the body in Step 4.

Note from the Author or Editor:
second to last sentence in tip on page 226 should say "after complete Step 4 above"

Says “you’ll read on page 184 in the next chapter.” We’re on 184.

Note from the Author or Editor:
Step 7 last sentence of second paragraph, reference to page 184 should be page 196

Says: “adding the coded in bold.” Should be “code.”

Note from the Author or Editor:
step 3 change "adding the coded" to "adding the code"

Says “You’ll learn about generated content on page 595.” Actually, we already learned about it back on pages 70-71.

Note from the Author or Editor:
change "You'll learn about generated content on page 595" to "You read about generated content on pages 70-71"

Says: “you’ll find a easy-to-use.” Should be “an.”

Says: “since it’s requires.” Should be “it.”

Says: “while the font-style property (page 141)” It’s unnecessary to provide a cross-reference to the page we’re on.

Note from the Author or Editor:
cross reference to page 140 should be page 163 and reference to page 141 should be page 162

Says: “preinstalled fonts discussed on page 127.” Do you mean 129?

Note from the Author or Editor:
reference to page 127 should be page 129

Step 5 is the first time in the Overcoming Conflicts section that you've told the reader to preview the page in a web browser. And the claim is that "the paragraph is completely unchanged." Not so. If the reader doesn't preview until step 5 (per the instructions), then the addition of .main p in step 2 will cause a visible difference in that paragraph in step 5, since that's the first time the file has been viewed in a browser since step 2. So the reader should be told to preview the file immediately after adding .main p.

Note from the Author or Editor:
page 121 last paragraph on page should begin like this "Preview the page in a web browser and you'll see that this new style changes the color, size and font of the text..." (rest of text is the same)

Says: "As mentioned on page 112, many web designers these days avoid ID selectors." Page 112 doesn't say that. It says to avoid super-long selectors, not ID selectors. Also doesn't say anything about web designers. Should be page 61 instead.

Note from the Author or Editor:
page 114, first sentence in main section change page reference from "page 112" to "page 61"

Says "See page 70 for the deal on these pseudo-things." Should be page 68.

Says: "you saw this trick in the previous tutorial on page 89" Should be page 90.

In all examples of the colon-using child pseudo-classes (except the one in question), there is no space before the colon. Therefore, for consistency, the first line on page 76 should be changed from “h1 :first-child” to “h1:first-child”.

Note from the Author or Editor:
remove space between h1 and :first-child should be h1:first-child

Says: “a HTML tag…” Should be “an HTML tag…”

Says “creating class or ID styles also require…” Should be “requires.”

This box erroneously refers to “ID selectors.” The text in this box is about the ID attribute in HTML, not the ID selector in CSS. A selector is part of the CSS language. And, as this box indicates, “You don’t actually need to create any CSS for this --- it works purely with HTML.” Likewise, the penultimate sentence on page 60 incorrectly uses “ID selectors.”

Note from the Author or Editor:
change first sentence of box to ID attributes in HTML have a few powers that class attributes lack.

In the step 6 example, the closing brace and closing style tag should be bold.

The another_page file didn't contain any link tags. We added two link tags. The example shows only the second link tag in bold. Both should be bold.

Note from the Author or Editor:
step 14, code: the two <link> tags should be bold

Says that we can see a completed version in internal.html. That file contains an h1 property (font-weight: normal;) that was never discussed in the text.

Note from the Author or Editor:
files updated on the server

Says: "The first two assign a size and font to the text, while the third removes space from around the headline." No, the first is color.

Note from the Author or Editor:
Second paragraph after the code in step 6 should read "The first assigns a size to the text, while the second removes space from around the headline."

Says: "Press Enter again add add three additional properties." The example doesn't add three more properties (which would lead to a total of four). It adds two more (leading to a total of three).

Note from the Author or Editor:
step6 should read "Press Enter again and add two additional properties, like so:"

"However, you can use negative values to move an image off the right edge or above the top edge, hiding that portion of the image from view." I believe it should be: "...you can use negative values to move an image off the left edge or above the top edge, hiding..."

Note from the Author or Editor:
change "off the right edge" to "off the left edge"

"have already incorporated parts the newer models" should read "have already incorporated parts OF the newer models".

Note from the Author or Editor:
change "parts the newer modules" to "parts of the newer modules"

Kindle version: is: "the enclose ..." Should be: "then enclose ..."

The sentence ends with "... (see Figure 13-16 for an example)." Figure 13-16 does not show the type of problem described here. Figure 13-12 does instead.

Note from the Author or Editor:
change "see Figure 13-16" to "see FIgure 13-12"

Hello, p.349: the name of Matthew Lein and of its Ceaser tool are misspelled: "Mathew Lein's Ceasar tool is one..." should read "Matthew Lein's Ceaser tool is one...". p.350: the name of the tool is misspelled: "The online Caesar tool..." should read "The online Ceaser tool...".

Note from the Author or Editor:
page 349 second to last sentence should read "Matthew Lein's Ceaser too..." Also in figure text for Fiture 10-8, Caesar should be Ceaser.

background-size: 100px auto; In this case, the background image is 100 pixels wide, and the browser automatically sets the width to keep the aspect ratio of the image intact (so it isn’t distorted). Instead of a browser automatically sets the width to........ it must be a browser automatically sets the height to....... As width value already specified as 100px.

Note from the Author or Editor:
last paragraph, first sentence of apge 253 change "the browser automatically sets the width" to "the browser automatically sets the height"

The "background-image" code ends with two semicolons instead of one.

Note from the Author or Editor:
first line of code on page (just above NOTE) should read: background-image: linear-gradient(left,black,white); (there should be only 1 semicolon at the end of the line)

3rd paragraph states "By default, the timing function is ease-in and there's no delay". I believe the default timing function as stated on page 348 is ease.

Note from the Author or Editor:
text should say: "By default, the timing function is ease and there's no delay" replace ease-in with ease

The first paragraph on page 353 says "Writing out all the different properties..." and lists the properties. But it duplicates the transition-duration property twice. The last property listed should be changed from transition-duration to transition-delay.

Note from the Author or Editor:
second line of first paragraph replace "transition-duration" with "transition-delay"

'that a moves away' should be 'that moves away'

"First" and "second" are reversed for the selectors provided: "To select only the second <h2> tag, your child selector looks like this: body > h2. If you want the first <h2> tag, then you must use this child selector instead: div > h2." "To select only the first <h2> tag, your child selector looks like this: body > h2. If you want the second <h2> tag, then you must use this child selector instead: div > h2."

"Fortunately, to maintain support with older sites, browser will continue to support..." Should probably be "browsers."

"selects a <p> tag that immediately follows a <h2> tag" should probably be "an <h2> tag."

Note from the Author or Editor:
First paragraph, third sentence Change "follows a <h2> tag" to "follows an <h2> tag" change "a" to "an"

Step 5. mentions a file "global.css" but there is no such file in the tutorial folders. Should be "main.css".

Steps 8. and 9. mention ".sidebar" style but there is no such style in the styles.css. It may be .sidebar1

Note from the Author or Editor:
step 8 change "the .sidebar style" to "the .sidebar1 style" Same in step 9

"5. Repeat Step 5 ..." Should be "5. Repeat Step 4 ..."

"Open the file styles.css in the image_ex folder ..." Should be "Open the file styles.css in the 01_image_ex folder ..."

Only "padding: 5px 15px 2px 15px;" should be in bold

Note from the Author or Editor:
step 3 code only last line of code should be bold

"... just stick with one color model (RBG) ..." Should be "... just stick with one color model (RGB) ..."

Note from the Author or Editor:
last line of note "RBG" should be "RGB"

"Click at the end of the closing brace of the body tag selector..." At this point only HTML tag selector has been used in the tutorial

Note from the Author or Editor:
page 182, step 1 change "brace of the body tag selector" to "brace of the HTML tag selector"

The text reads: nav li { display: inline-block; float: none; } To be consistent with the instructions in step 6 on page 485, it should read: nav li { float: none; display: inline-block; }

Reference to "Step 8 on page 486" should be "Step 8 on page 476".

The instructions for Step 2 say to add a style (in bold). None of the three lines of added styling data is actually bolded in the book.

Note from the Author or Editor:
code in step 2, the following code should be BOLD .sidebar2 { float: none; width: auto; }

The word The is there twice in the Mark Twain quote.

discussed on page 260 should be discussed on page 265

In keeping with previous text conventions in this book, the last six items added to the style in Step 9 on pages 393 & 394 should be bolded.

The 2nd sentence reads: "This table has an class of inventory..." It should read: "This table has a class of inventory..."

The sentence reads: "understand the how web browsers..." Should read: "understand how web browsers..."

The link reference: www.w3schools.com/html5/html5_intro.asp is incorrect. It should read: www.w3schools.com/html/html5_intro.asp

Incorrect tag specified - should be <ul> not <li>. Reads now: Create a style that applies to the list - like a class style you apply to the <ol> or <li> tags... At this point, everything in the list - text included - is red and bold. Should read: Create a style that applies to the list - like a class style you apply to the <ol> or <ul> tags... At this point, everything in the list - text included - is red and bold.

Incorrect web font format identifier (same mistake is made twice) and missing article. As it reads now: "WOOF is generally preferred since it's a smaller file that downloads more quickly, while SVG is generally much larger file, so you want to make sure that you list the fonts in the order of .eot, .woof, .ttf, and .svg." Should read: "WOFF is generally preferred since it's a smaller file that downloads more quickly, while SVG is generally a much larger file, so you want to make sure that you list the fonts in the order of .eot, .woff, .ttf, and .svg."

Inconsistent usage of values in Step 6, Pg 333 in .mainNav. The border-left property is not consistent with the entry made earlier in Step 10 on page 327. The original value entered was: border-bottom: 1px dashed #999; The values used in the entry on page 333 was: border-left: 1px dashed #999999; The color values result in the same color being displayed, but one used the full value while the other uses the shorthand value.

Note from the Author or Editor:
step 6, page 333, 5th line of code, change border-left: 1px dashed #999999; to border-left: 1px dashed #999;

The figure reference is incorrect: It currently reads: "and style (Figure 9-11, left)". It should read: "and style (Figure 9-10, left)".

Note from the Author or Editor:
Change "(Figure 9-11, left)" to "(Figure 9-10)."

Reads: "in this chapter's tutorial on page 310" Should be: "in this chapter's tutorial beginning on page 324"

Pages 301-302 - second sample button code: The problem with the code as shown in the printed version is that each line of code is numbered even though some of the code lines are actually continuation of code lines that have wrapped on the page. The following shows the code with each code line given its own line number. This then corresponds correctly with the explanation text written in the book. 1. background-color: #ee432e; 2. background-image: -webkit-linear-gradient(top, #ee432e o%, #c63929 50%, #b51700 50%, #891100 100%); 3. background-image: -moz-linear-gradient(top, #ee432e o%, #c63929 50%, #b51700 50%, #891100 100%); 4. background-image: -o-linear-gradient(top, #ee432e o%, #c63929 50%, #b51700 50%, #891100 100%); 5. background-image: linear-gradient(top, #ee432e o%, #c63929 50%, #b51700 50%, #891100 100%); 6. border: 1px solid #951100; 7. border-radius: 5px; 8. box-shadow: inset 0px 0px 0px 1px rgba(255, 115, 100, 0.4), 0 1px 3px #333333; 9. padding: 12px 20px 14px 20px; 10. text-decoration: none; 11. color: #fff; 12. font: bold 20px/1 "helvetica neue", helvetica, arial, sans-serif; 13. text-align: center; 14. text-shadow: 0px -1px 1px rgba(0, 0, 0, 0.8);

Incorrect page number referenced. Is: "as explained in the box on page 296. Should be: "as explained in the box on page 294.

Second paragraph reads ...you can use and valid CSS color values... It should read ... you can use any valid CSS color values...

The reference to Figure 8-10 is incorrect. It should be figure 8-11.

All references in subject paragraph plus the three bulleted items below it refer to Figure 8-9. They should refer to figure 8-10 on page 253 instead.

In the "Troubleshooting Moment" box, paragraph #3, "...that *specific* property always wins." The use of the word "specific" in this context where *specificity* actually has a larger connotation, is perhaps best avoided. The fact I am submitting such a nit is testament to the fact that this is a truly awesome book! Thanks!

Note from the Author or Editor:
In the sidebar, 2nd column, 1st paragraph, please change "that specific property always wins" to "that property always wins."

`Code` should be `Coda`.

To keep the respective order, top, right, left, and bottom padding would read top, right, bottom, and left padding

You can only use an ID should read You can also use an ID

tag with the ID of inventory should read tag with the class of inventory

"a bottom's hover state" should read "a button's hover state"

mailto,: should be mailto:

"and create descendent selector like .stocks td or stocks th to uniquely format individual cells." should be "and create descendent selector like .stocks td or .stocks th to uniquely format individual cells." That is, the class dot is missing from before the second "stocks".

Note from the Author or Editor:
change stocks th to .stocks th (add period before "stocks th")

..main should be .main

Note from the Author or Editor:
first line of code for step 3 should be .main .byline strong (remove extra period in ..main)

is: In Figure 13-9 should be: In Figure 13-8

Book shows 2 curly braces after -moz-box-sizing style - There should only be one closing curly brace

Note from the Author or Editor:
last line of code for step 2 on page 447 should have only one } not two

"You decide that you want to colors the paragraphs" Should read: "You decide that you want to color the paragraphs"

Note from the Author or Editor:
"you want to colors" should be "you want to color"

Reads as ...For example, you can use apply a class to a paragraph... Should be : For example, you can apply a class to a paragraph OR For example, you can use a class with a paragraph

Note from the Author or Editor:
change "you can use apply a class" to "you can use it to apply a class"

Reads as : there's only on <h1> tag... Should be there's only one <h1> tag

SMALL TYPO Step #20 "Creating an External Style Sheet" in Chapter 2 says figure 2-4 shows another_page.html. I believe Figure 2-4 actually shows basic.html.

Note from the Author or Editor:
In step 20, "Figure 2-4 shows the completed another_page.html file." should be "Figure 2-4 shows the completed basic.html file."

"which requires the usually semicolon necessary"? This looks like it should be "usual".

Note from the Author or Editor:
change "the usually semicolon" to "the usual semicolon"

After saying that one cannot do much with ::selection, the text thanks CSS for making sure that we "can go wild". In the context, this should probably be "can't go wild".

Note from the Author or Editor:
change "you can go wild" to "you can't go wild"

The world "manufactures" should be changed to "manufacturers".

Note from the Author or Editor:
2nd paragraph of up to speed box, first sentence should end in "browser manufacturers move cautiously."

Figure 8-14 should have value 0deg (360deg) at left side of square instead of 315deg.

Line: " box-shadow: 0 0 15px 5px rgba(44,82,100,.75); " should be in bold. Other lines were added earlier.

Note from the Author or Editor:
Make line 4 of the code bold: box-shadow: 0 0 15px 5px rgba(44,82,100,.75); ALL OTHER LINES ARE NOT BOLD

Is: <div id="article"> Should be: <div class="article"> In the sentence above this code: "you simply replace all IDs with classes"

In book is: margin-left: 80px; In code samples is: margin-left: 60px; For consistency it should be: margin-left: 60px; On page 53 referenced value for paragraph styling is 60 pixels: "For example, you might change its color, and indent it 60 pixels to match the indent of the <p> tags."

Note from the Author or Editor:
in code on page 47 change margin-left: 80px; to margin-left: 60px;