Errata

CSS3: The Missing Manual

Errata for CSS3: The Missing Manual, Third Edition

Submit your own errata for this product.

The errata list is a list of errors and their corrections that were found after the product was released. If the error was corrected in a later version or reprint the date of the correction will be displayed in the column titled "Date Corrected".

The following errata were submitted by our customers and approved as valid errors by the author or editor.

Color key: Serious technical mistake Minor technical mistake Language or formatting error Typo Question Note Update

Version Location Description Submitted By Date submitted Date corrected
ePub
Page Loc 1158
Figures 2-3 and 2-4.

HI - this is for the Kindle version of the book so no page numbers.

I worked through all steps of 'Creating an Internal Style Sheet'.

There was no mention of changing the font.

But Figure 2-3 shows the font changed to a sans-serif.

As far as I can see, we only start introducing the sans-serif in later exercises, so I think the figure might be an incorrect example for that first exercise.

I also found the next exercise, 'Creating an External Style Sheet' didn't lead to the image shown in Figure 2-4 in either Safari or Chrome.

Everything was correct except that for me the blue box just scaled to the width of the browser, whereas the example shows it with a drop shadow and a sitting on a tan background. I've checked and re-checked the steps but can't achieve this effect. Everything else worked fine overall.

One thing that's unclear is whether it matters what order the elements are placed within the .css file. In 'Creating an External Style Sheet' steps 4 and 5, it just says to copy the style information from the html file and paste it in the css file, but doesn't say whether it matters where. I'm guessing it doesn't matter but would be good to know; because the example didn't work it left me wondering whether the order of logic within css file was the issue.

Note from the Author or Editor:
Yes Figure 2-3 incorrectly displays the headline using a sans-serif font.

However, Figure 2-4 is correct. You may have made a typo. Open the "another_page.html" file in the 02_finished folder and preview it in Chrome.

Anonymous  May 06, 2013  May 31, 2013
Printed
Page Page 391
Point 4

Is: font-size: 1.3em
schould be: font-size: .85em

Note from the Author or Editor:
code for step 4 on page 391, change
font-size: 1.3em;
to
font-size: .85em;

Peter Szalc  Dec 22, 2013  Apr 11, 2014
Printed
"Up to Speed" pg., 27 4th paragraph

On the fourth paragraph there is a 404 turnaround when enter the URL into the browser bar. The URL is: http://users.skynet.be/mcguery/mozilla/
I receive an error message (Unix-404)

Note from the Author or Editor:
The URL in the book is missing a trailing forward slash at the end. This is the correct URL:

http://users.skynet.be/mgueury/mozilla/

Thea  Jan 12, 2014  Apr 11, 2014
Printed
Page 5
2nd paragraph

"roots" should be "root".

Rajat Sehgal  Nov 25, 2013  Apr 11, 2014
PDF
Page 6
1st paragraph in 'html5: the wheel turns again'; 4th sentence

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

Ronnie Norwood  Aug 05, 2013  Nov 01, 2013
PDF
Page 7
last two lines

Sublime Text is also available for Linux and Windows.

Note from the Author or Editor:
Change last two line to:

Submline Tex (Mac, Windows, Linux; www.sublimtext.com) is a relatively new text editor. It's beloved by many web coders.

Przemysław Dąbek  Dec 28, 2012  Jan 11, 2013
Printed
Page 9
Paragraph 6 in "The Different Flavors of CSS" box-out

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

Chris Wells  Oct 25, 2013  Nov 01, 2013
Printed
Page 23
Note box

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

Anonymous  May 10, 2013  May 31, 2013
Printed
Page 29
Illustration of <q> tag under next to last bullet point

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

Ed Collins  May 17, 2013  May 07, 2013
Printed
Page 44
1st paragraph, 1st line

www.sawmac.com/css3 gives a 404 page error. The link needs to be updated.

Note from the Author or Editor:
This link has been fixed.

Tim Schmid  Feb 08, 2013  May 01, 2013
Printed
Page 44
First paragraph

Says "detailed instructions for unzipping the files are on the website as well."

Where?

Note from the Author or Editor:
First paragraph remove the parenthetical expression

(detailed instructions for unzipping the files are on the website as well)

MJB  Oct 29, 2013  Apr 11, 2014
Printed
Page 46
Step 6

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:"

MJB  Oct 30, 2013  Apr 11, 2014
Printed
Page 46
2nd paragraph of step 6

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."

MJB  Oct 30, 2013  Apr 11, 2014
PDF
Page 47
CSS code in 8.

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;

Przemysław Dąbek  Dec 28, 2012  Jan 11, 2013
Printed
Page 47
Step 9

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

MJB  Oct 30, 2013  Apr 11, 2014
Printed
Page 47
top

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

MJB  Oct 30, 2013  Apr 11, 2014
48
Attribute Selectors

I have reached the Chapter 9 tutorials, and nowhere in your book up to that point does it mention that attribute selectors are case-sensitive. So, for example, the following style will place use an Acrobat logo as the background image of a link to a file whose name ends in ".pdf", but will not do so for the following file extensions: .pdF .pDf, .pDF, .Pdf, .PdF, .PDf, and .PDF:
.resources a[href$='.pdf'] {
background: url(images/acrobat.png) no-repeat right top;
}

I purposely capitalized the file extension in the Acrobat file link, and the background image did not appear, leading me to suppose that Attribute Selectors are case sensitive. Could you please state that definitively?

Note from the Author or Editor:
Thanks for asking this question. I've never really considered it, but having tested your example, I've found that you're right. While the attribute selector is NOT case-sensitive for attribute names (for example a[HREF] is the same as a[href] and a[HrEf], it is case sensitive for the attribute value, including file names. Unfortunately, there's no way to turn this off, so if you absolutely have to account for all the possible variants of .pdf, you need to create a long-winded group selector like this:

a[href$='.pdf'], a[href$='.Pdf'], a[href$='.pDf'], a[href$='.pdF'], a[href$='.PDf'], a[href$='.PdF'], a[href$='.pDF'], a[href$='.PDF'] {

}

Another good reason to make all file names lower case.

Joseph Davoli  Jan 31, 2013  Apr 11, 2014
Printed
Page 49,52
Omission

The downloaded files do not have any images in the 02 folder, although there are images in the 02 "finished folder". This seriously messes with you if you are previewing these steps in the browser.

I thought I was going crazy when I could not see any background color after I added the styles in step #2 on page 49, but chalked it up to differences in my screen. When I added the style in step # 17 on page 52, I figured I had made an error in the code somewhere because no bullet images showed up next to the headlines either, but I finally realized that there were no images to link to.

Note from the Author or Editor:
We're uploading new tutorial files, so this problem should be fixed soon.

Virginia Bicket  Jan 21, 2013  May 31, 2013
Printed
Page 52
Step 14

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

MJB  Oct 30, 2013  Apr 11, 2014
ePub
Page 53
Image 1-2

"This is an Adobe Illustrator file that was saved without PDF content. To place... "

Link

http://twitter.com/solencio/status/293902380976730113/photo/1

Jhovana Sánchez  Jan 22, 2013  May 31, 2013
PDF
Page 53
Last line

Last line asks to indent 60 pixels to match the <p> tags. However, the <p> tags CSS is set to indent it to 80 pixels on page 52.

Note from the Author or Editor:
last line on page 53 change
"indent it 60 pixels"
to
"indent it 80 pixels"

Anonymous  Jul 19, 2013  Nov 01, 2013
Printed
Page 59
4th paragraph, directly below the NOTE

The sentence: "For example, to highlight just one word in a paragraph using the .special style you could write this: <p>Welcome to <span class="company name">Cafe Soylent Green</span>, the restaurant with something a little different.</p> ..............doesn't make sense to me or am I missing something? Where is the .special style applied in that sentence? Thanks.

Note from the Author or Editor:
the code
"<p>Welcome to <span class="companyName">Caf? Soylent Green</span>, the restaurant with something a little different.</p>"
should read
"<p>Welcome to <span class="special">Caf? Soylent Green</span>, the restaurant with something a little different.</p>"

John Rotella  Jan 17, 2013  May 31, 2013
Printed
Page 62
The ?Proper IDs? box

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.

MJB  Nov 02, 2013  Apr 11, 2014
Printed
Page 63
Middle of the first paragraph in the Styling Tags Within Tags section

Says ?creating class or ID styles also require?? Should be ?requires.?

MJB  Nov 03, 2013  Apr 11, 2014
Printed
Page 68
Second sentence of the note

Says: ?a HTML tag?? Should be ?an HTML tag??

MJB  Nov 03, 2013  Apr 11, 2014
ePub
Page 69
Number 20 in "Creating an External Style Sheet" figure 2-4

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."

Lauren Kate  Jan 19, 2013  May 31, 2013
Printed
Page 69
Last pgh. under Note

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

Ed Collins  Jun 11, 2013  Nov 01, 2013
Printed
Page 71
Section on ::selection

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"

pydsigner  Jan 15, 2013  May 31, 2013
Printed
Page 74
United States

The selector for a Word document has the bracket in the wrong place. It should be: a[href$=".doc"]

Also, the selector for the Movies links should not have a space between the 'a' and the bracketed part because the space would turn it into a descendant selector.

Note from the Author or Editor:
last sentence in paragraph five, two code examples should read

a[href$=".doc"]
and
a[href$=".mp4"]

Anonymous  Aug 09, 2013  Nov 01, 2013
Printed
Page 75
bottom paragraph, second line

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

Should be
there's only one <h1> tag

Anonymous  Jan 21, 2013  May 31, 2013
PDF
Page 75
1st paragraph, last sentence

"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."

Jason Long  Jul 13, 2013  Nov 01, 2013
PDF
Page 76
:last-child paragraph, second sentence

ul:last-child selects the entire list wherever it is the last child of another element, not an individual list item within ul elements.

How it reads now:
For example, to style the last item in a list, you use the ul :last-child selector (see Figure 3-7).

How it should read:
For example, to style the last item in a list, you use the li :last-child selector (see Figure 3-7).

Note from the Author or Editor:
The text is not incorrect, but it could be made more clear.

Change "you use the ul :last-child selector" to "you use the ul li:last-child selector"

In Figure 3-7, the selectors should read:
ul li:first-child
ul li:last-child
ul li:nth-child(odd)
ul li:nth-child(even)
ul li:nth-child(3n+1)
ul li:nth-child(4n+2)

Keith MacD  Apr 13, 2013  May 31, 2013
PDF
Page 76
:last-child paragraph & Figure 3-7

It is unclear if a space is necessary between the tag selector and the :first-child or :last-child pseudo-element selectors

The example in the :first-child section (on page 75) has no space between the two parts of the selector - h1:first-child

The examples in the :last-child section and Figure 3-7 have a space between the two parts - ul :last-child

The impact of spacing in CSS selectors should be clarified somewhere, e.g. does p.myClass apply the same way as p .myClass?

Note from the Author or Editor:
This reader's question is answered on page 38: "Web browsers ignore spaces and tabs, so feel free to add them to make your CSS more readable. For example, it's helpful to indent properties, with either a tab or a couple of spaces, to visibly separate the selector from the declarations, making it easy to tell which is which. In addition, putting a space between the colon and the property value is options but adds to the readability of the style."

That said, in the interest of consistency, in the first line of p. 76, please change h1:first-child to h1 :first-child.

Keith MacD  Apr 13, 2013  May 31, 2013
Printed
Page 76
first line

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

MJB  Nov 03, 2013  Apr 11, 2014
Printed
Page 76
Figure 3-7

In the ?ul li:nth-child(3n+1)? example, why are rectangles around ?two? and ?five??

Note from the Author or Editor:
figure needs to be updated. in bottom middle image, the black outlines need to move up one to outline the "one" and "four" bullet points (not the two and five points as they are now).

MJB  Nov 03, 2013  Apr 11, 2014
Printed
Page 80
Second paragraph (first paragraph under heading)

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"

Anonymous  Jan 21, 2013  May 31, 2013
Printed
Page 80
top pgh (before The:not ( ) Selector)

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

Ed Collins  Jun 05, 2013  Nov 01, 2013
Printed
Page 82
HTML snippet in step 2

The first two lines need to be indented and the last line dedented. As is, the segment looks especially confusing since the opening part of the head tag is not included.

Note from the Author or Editor:
last two lines of code
</style>
</head>
should not be indented.

pydsigner  Feb 01, 2013  May 31, 2013
Printed
Page 98
second paragraph

second sentence: If the <em>, <a>, and <strong> tags....
should be: If the <em>, and <strong> tags....

Note from the Author or Editor:
Change
"If the <em>, <a>, and <strong> tags didn't inherit..."
to
"If the <em> and <strong> tags didn't inherit..."

Szalc  Dec 13, 2013  Apr 11, 2014
Printed
Page 98
3rd paragraph, second sentence

As mentioned on page 97
should be: As mentioned on page 96

Note from the Author or Editor:
change "page 97" to "page 96"

Szalc  Dec 13, 2013  Apr 11, 2014
Printed
Page 100
first paragraph

Says: "you saw this trick in the previous tutorial on page 89"

Should be page 90.

MJB  Nov 03, 2013  Apr 11, 2014
Printed
Page 108
note at bottom

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

Should be page 68.

MJB  Nov 03, 2013  Apr 11, 2014
Printed
Page 110
paragraph after 2 lines of code

Paragraph should read:

In this case, the link would be blue. Since p .email appears afters .byline a in the style sheet, its properties win out.

David Sawyer McFarland
David Sawyer McFarland
 
Jan 07, 2013  Jan 11, 2013
Printed
Page 110
Pgh. after FAQ box

"Since .byline a appears after p .email in the style sheet, its properties win out."

In the code provided right above that line, .byline a appears before p .email, not after.

Note from the Author or Editor:
code on page 110 (below note) reverse order of lines so that they read

p.email { color: blue; }
.byline a {color: red; }

Ed Collins  Jul 16, 2013  Nov 01, 2013
Printed
Page 110
First paragraph under the box

This is in the 4th Release (2013-11-01)

Text says:

"Now suppose the style sheet looked like this instead:

p.email { color: blue; }
.byline a { color: red; }

...Since p .email appears after .byline in the style sheet, its properties win out."

Two problems:

1. I believe the style sheet should have a space between "p" and ".email".

2. The explanation is opposite of the order in the style sheet. The style sheet lines should be switched.

It looks like this was changed from a previous release, but STILL WRONG!

Ron Morrill  Mar 17, 2014  Apr 11, 2014
Printed
Page 111
United States

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."

Puneet Lamba  Apr 08, 2013  May 31, 2013
PDF
Page 114
code at the bottom of the page

Is:
<div id="article">

Should be:
<div class="article">

In the sentence above this code: "you simply replace all IDs with classes"

Przemysław Dąbek  Dec 29, 2012  Jan 11, 2013
PDF
Page 114
3rd paragraph, starting with "You decide"

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

Anonymous  Jan 23, 2013  May 31, 2013
Printed
Page 114
first sentence in main section

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"

MJB  Nov 03, 2013  Apr 11, 2014
Printed
Page 122
Step 5

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)

MJB  Nov 03, 2013  Apr 11, 2014
PDF
Page 138
Last code snippet on page, 4th line

Incorrect hyphenation of code. Code as written is linguistically correct however is syntactically incorrect - the extra hyphen causes confusion.

Is now:
src: url('fonts/League_Gothic-webfont.eot?#iefix') format('embedded-openty-pe'),

Should be:
src: url('fonts/League_Gothic-webfont.eot?#iefix') format('embedded-opentype'),

Note from the Author or Editor:
Please fix the hyphenation.

Keith MacD  Apr 28, 2013  May 31, 2013
PDF
Page 139
Last sentence on page

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."

Keith MacD  Apr 28, 2013  May 31, 2013
PDF
Page 139
Bullet point 4 code snippet

Incorrect font format identifier.

As it reads now:
url('fonts/League_Gothic-webfont.woof') format('woff')

Should read:
url('fonts/League_Gothic-webfont.woff') format('woff')

Keith MacD  Apr 28, 2013  May 31, 2013
PDF
Page 140
2nd paragraph

"Most browsers will artificially bold a web font when a
submibold version is required. "

submibold? What does it mean?


Note from the Author or Editor:
"Most browsers will artificially bold a web font when a submibold version is required. "
should be:
"Most browsers will artificially bold a web font when a bold version is required. "

Anonymous  Dec 30, 2012  Jan 11, 2013
Printed
Page 140
Second sentence of first main paragraph

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

MJB  Nov 04, 2013  Apr 11, 2014
Printed, ePub
Page 141
Bottom of page @font-face directive

the woff font is labeled with the extension .woof instead of .woff

The css files in chapter 6 are also incorrect for the file name at-font-face.css. It says woof

Note from the Author or Editor:
pages 138, 141, 142, 144, 180, 181
In the code blocks change
'PTSansRegular.woof' to
'PTSansRegular.woff'

Anonymous  Feb 26, 2013  May 31, 2013
Printed
Page 141
First paragraph of ?The Easy Way? section

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

MJB  Nov 04, 2013  Apr 11, 2014
PDF
Page 143
3rd paragraph

Opening tag instead of the closing one
"...<em>anything<em>..."

Note from the Author or Editor:
second chunk of code on page
"<em>anything<em>"
should be
"<em>anything</em>"

(change last <em> to </em>)

Anonymous  Jun 01, 2013  Nov 01, 2013
PDF
Page 143
Line 4 at the paragraph begins with "When The web browser....."

"...the word not inside the <strong> tags would use the PTSansBold font;"

I guess there should be an quotation marks (" ") placed around "not".

"...the word "not" inside the <strong> tags would use the PTSansBold font;"

Note from the Author or Editor:
add quotes around not:

the word "not" inside the <strong> tags

Anonymous  Jun 23, 2013  Nov 01, 2013
Printed
Page 143
Note

Says the demo files are in ?this chapter?s tutorial files.? On my computer, the webfonts-demo folder ended up in the root folder, not in the 06 folder.

Note from the Author or Editor:
First sentence of Note should read:
"This books tutorial files include examples of both techniques for including bold and italic versions of fonts."

MJB  Nov 04, 2013  Apr 11, 2014
Printed
Page 152
Bullet about JavaScript

Says: ?since it?s requires.? Should be ?it.?

MJB  Nov 04, 2013  Apr 11, 2014
Printed
Page 157
Note

Says: ?you?ll find a easy-to-use.? Should be ?an.?

MJB  Nov 04, 2013  Apr 11, 2014
Printed
Page 162
United States

I'd like to correct a broken link.

The link in the "Tip" box points to http://www.creativepro.com/story/feature/19877.html

This link doesn't work, but I think the article is still on their site at:

http://www.creativepro.com/article/dot-font-seven-principles-of-typographic-contrast

Hope this helps!

Anonymous  Aug 10, 2013  Nov 01, 2013
Printed
Page 167
Last sentence of top paragraph

Says: ?In Internet Explorer, the text would be invisible.? Shouldn?t that be ?Internet Explorer 9 or earlier??

Note from the Author or Editor:
last sentence of top paragraph should read:
"In Internet Explorer 9 and earlies, the text would be invisible --white text on a white background."

MJB  Nov 04, 2013  Apr 11, 2014
Printed
Page 176
Last paragraph

Regarding the url value, the last sentence says ?you don?t use quotation marks around the path.? This contradicts the last paragraph of page 243, which says ?quotes are fine, too.? Also contradicts code examples at the top of 244.

Note from the Author or Editor:
change last sentence of page 176 to
"Notice that, unlike HTML, you don't have to use quotation marks around the path (though you can, if you like.)"

MJB  Dec 06, 2013  Apr 11, 2014
PDF
Page 177
3rd paragraph in Customizing List Bullets and Numbers FAQ box

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.

Keith MacD  May 04, 2013  May 31, 2013
Printed
Page 177
FAQ box, 2nd column

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"

MJB  Nov 04, 2013  Apr 11, 2014
PDF
Page 182
1. Return to your text editor ...

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

Anonymous  Jun 02, 2013  Nov 01, 2013
PDF, ePub
Page 183
5. .main 2 {

the following line is missing:


color: rgb(37,76,143);

Note from the Author or Editor:
code for step 5 should be:

.main h2 {
font: bold 3.5em "Hoefler Text", Garamond, Times, serif;
color: rgb(37,76,143);
border-bottom: 1px solid rgb(200,200,200);
margin-top: 25px;
}

Gert  Feb 06, 2013  May 31, 2013
Printed
Page 183
Step 5

In the instructions of step 5, "add the following styles" should be changed to "add the following style"

in addition, the style is incomplete it needs to have a color assigned as well. The code for the complete style should look like this:

.main h2 {
font: bold 3.5em "Hoefler Text", Garamond, Times, serif;
color: rgb(37,76,143);
border-bottom: 1px solid rgb(200,200,200);
margin-top: 25px;
}

David Sawyer McFarland
David Sawyer McFarland
 
Oct 29, 2013  Nov 01, 2013
Printed
Page 183
Step 3

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"

MJB  Nov 05, 2013  Apr 11, 2014
Printed
Page 184
Step 7, penultimate paragraph.

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

MJB  Nov 05, 2013  Apr 11, 2014
Printed
Page 186
3rd pgh.

Pgh starts "The width property ... makes the entire list 150 pixels wide." But on the previous page, the width is set to 170 pixels.

Note from the Author or Editor:
change "makes the entire list 150 pixels wide" to
"makes the entire list 170 pixels wide"

Ed Collins  Sep 17, 2013  Nov 01, 2013
PDF
Page 188
Instruction Step 3

..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)

slc-epb  Jan 30, 2013  May 31, 2013
Printed
Page 206
The 2nd last paragraph

rgba(255,255,255.75)

should be

rgba(255,255,255,.75)

There is a missing ",".

Jiang Hong  Mar 06, 2013  May 31, 2013
PDF
Page 208
Following the 3rd paragraph

There seems to be an error in the two lines of code that show how to achieve different elliptical shapes for individual corners:

border-radius: 40px/20px 10px/30px 20px/40px 10px/20px;

border-radius: 10px 10px/30px 20px/40px 10px;

These should contain only a single slash to separate the values for horizontal radii on the left from the values for vertical radii on the right:

border-radius: 40px 10px 20px 10px / 20px 30px 40px 20px;

border-radius: 10px 10px 20px 10px / 10px 30px 40px 10px;



Note from the Author or Editor:
The last sentence of the 4th paragraph and the 3 lines after that should be changed to:

"You can make all four corners have different oblong shapes by providing four values for each radius of the ellipsis. This is a bit confusing: you first provide the four values for the horizontal radius of each corner (starting in the top-left corner); then a forward slash (/) followed by four values for the vertical radius of each corner, like this:
border-radius: 40px 10px 20px 10px / 20px 30px 40px 20px;

To mix and match elliptical and circular corners you need to use this same syntax -- circular corners will have the same horizontal and vertical radii:

border-radius: 10px 10px 20px 10px / 10px 30px 40px 10px;

Nathan Walsh  Jul 02, 2013  Nov 01, 2013
Printed
Page 209
Up To Speed blurb

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."

pydsigner  Jan 15, 2013  May 31, 2013
Printed
Page 217
Note blurb

Shouldn't the "and older" be "and newer"?

Note from the Author or Editor:
change
"in Internet Explorer 8 and older"
to
"in Internet Explorer 8 and newer"

pydsigner  Jan 15, 2013  May 31, 2013
PDF
Page 226
NOTE

"... 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"

Anonymous  Jun 02, 2013  Nov 01, 2013
Printed
Page 226
Tip

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"

MJB  Nov 05, 2013  Apr 11, 2014
PDF
Page 228
point 6

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

Anonymous  Dec 31, 2012  Jan 11, 2013
Printed
Page 230
Step 2

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);

MJB  Nov 05, 2013  Apr 11, 2014
PDF
Page 231
Step 3.

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

Anonymous  Jun 02, 2013  Nov 01, 2013
Printed
Page 231
Step 4

Only the margin declaration should be bold.

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

MJB  Nov 05, 2013  Apr 11, 2014
Printed
Page 231
Paragraph before Step 4

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"

MJB  Nov 05, 2013  Apr 11, 2014
Printed
Page 231
Paragraph before Step 4

Says: ?the headline is indented . . . The headline would look better ??

This is confusing. At first, I thought ?headline? meant the text. I suggest this be changed so that it's clear you're talking about the headline?s background color, not the text.

Note from the Author or Editor:
The paragraph just before step 4 on page 231 should read:
"There's one problem with the headline: Because of the padding added to the body tag (see Step 5 on page 226), the headline (including its background color) is indented 15 pixels from the left and right edges of the grey border surrounding the body. The headline would look better if its background color touched the grey border. No problem, negative margins to the rescue."

MJB  Nov 05, 2013  Apr 11, 2014
Printed
Page 240
Penultimate paragraph

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.

MJB  Dec 06, 2013  Apr 11, 2014
PDF
Page 248
Last paragraph

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

Mark Alison  Oct 26, 2013  Nov 01, 2013
Printed
Page 252
bottom paragraph plus the bulleted below it

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.

Donald McRoberts  Apr 14, 2013  May 31, 2013
PDF
Page 252
3rd bullet point on page

The 3rd bullet point reads:

'content-box places the image in the upper-right corner of the area assigned to the content (top-right in Figure 8-10).'

It should read:

content-box places the image in the upper-left corner of the area assigned to the content (top-right in Figure 8-10).


Note from the Author or Editor:
3rd bullet point,
change "upper-right corner"
to
"upper-left corner"

Nathan Walsh  Jul 15, 2013  Nov 01, 2013
PDF
Page 253
last Paragraph

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"

Anonymous  Aug 26, 2013  Nov 01, 2013
Printed
Page 253
First sentence of the ?Scaling? section

Says: ?Unlike the HTML <img> tag, you can normally resize a background image.?

Doesn?t the HTML <img> tag have width and height attributes?

Note from the Author or Editor:
Change first sentence for "Scaling background images" to
"Unlike the HTML <img> tag, you can't normally resize a background image."

MJB  Dec 06, 2013  Apr 11, 2014
Printed
Page 254
First full paragraph under the bulleted items.

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

Donald McRoberts  Apr 14, 2013  May 31, 2013
Printed
Page 257
Note blurb

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

pydsigner  Jan 15, 2013  May 31, 2013
Printed
Page 260
The code just above the "NOTE".

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)

Scott McLeod  Aug 20, 2013  Nov 01, 2013
Printed
Page 260
a code just above the figure 8-13

It shows like this:

background-image: linear-gradient(top left, black, white);

but it resolved as a repeating gradient.

According to W3schools.com, it need "to" right before "top" when there is no vendor prefix. Thus, like this:

background-image: linear-gradient(to top left, black, white);

I tried it, and it worked.

Note from the Author or Editor:
change the note on page 260 to

The syntax for linear gradients has changed many times in its history. Browsers have changed the syntax for linear gradients since this book was first written. The most important change is that the direction, for example "top left" needs a "to" before it like this:
linear-gradient(to top left, black, white)
You can read more about this new syntax at https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient. Using an online gradient creation tool, like Colorzilla discussed on page 269, is the best way to create cross-browser compatible gradients.

Anonymous  Jan 29, 2014  Apr 11, 2014
PDF
Page 261
figure 8-14

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

Anonymous  Dec 31, 2012  Jan 11, 2013
Printed
Page 262
NOTE

discussed on page 260

should be

discussed on page 265

Geoffrey Wade  May 16, 2013  May 31, 2013
Printed
Page 268
2nd paragraph below Figure 8-17

Second paragraph reads ...you can use and valid CSS color values...

It should read ... you can use any valid CSS color values...

Donald McRoberts  Apr 18, 2013  May 31, 2013
PDF
Page 274
Step 2.

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

Anonymous  Jun 03, 2013  Nov 01, 2013
Printed
Page 274
The code in steps 4 and 5.

The "margin" property magically changes from step 4 to step 5 without any mention. One or the other should be corrected and if step 4's code is to be corrected to look like step 5's, then the description of this margin setting under step 4's code should be corrected too.

Note from the Author or Editor:
Page 274, code from step 5:

replace these two lines:
margin-left: 10px;
margin-bottom: 10px;

with just this one line:
margin: 10px;

Scott McLeod  Aug 20, 2013  Nov 01, 2013
Printed
Page 275
9. point

Page 275
Point 9
is: After the <img> tag
should be: Before the <img> tag

Point 10
is: delete the .figure style
should be delete the img.figure style

Note from the Author or Editor:
Step 9: the first <figure> should not be bolded. Only text you add is bolded (the opening <figure> tag is added in step 8).

Step 10:
"delete the .figure style" should read
"delete the img.figure style"

Peter Szalc  Jan 22, 2013  May 31, 2013
Printed
Page 275
Step 10

This should indicate that we?re switching from image.html to styles.css.

Note from the Author or Editor:
Step 10 should read:

"Switch back to the styles.css file. Scroll to the bottom of the file and delete the img.figure style you created earlier."

MJB  Dec 06, 2013  Apr 11, 2014
Printed
Page 278
Step 1

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

MJB  Dec 06, 2013  Apr 11, 2014
Printed
Page 278
Code after Step 1

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 ...

MJB  Dec 06, 2013  Apr 11, 2014
Printed
Page 281
1st point

Is: open the styles.css
Should be: open the gallery.html

Note from the Author or Editor:
Please change Step 1 to: "In a text editor, open the styles.css file you completed in the tutorial on Enhancing Images (page 272)."

Peter Szalc  Mar 26, 2013  May 31, 2013
Printed
Page 281
Last sentence of first paragraph

Says: ?you?ll wrap this tutorial up in two steps.?
Should be ?three steps.?

MJB  Dec 06, 2013  Apr 11, 2014
Printed
Page 281
1st step

A previous confirmed error for page 281 was incorrectly resolved. It should have been resolved as suggested by the reader. Using the styles.css from a previous tutorial is not correct and leads to a horrible looking page. The style that should be modified on page 281 is the INTERNAL style in gallery.html, which is what we?ve been working with throughout this tutorial. This is confirmed by the fact that the code after Step 2 is identical to the code that appears in gallery.html but not identical to the code in styles.css.

Note from the Author or Editor:
step 1 on page 281 should read:

In a text editor, return to the gallery.html file you've been working on.

MJB  Dec 06, 2013  Apr 11, 2014
Printed
Page 281
Last sentence

?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.

MJB  Dec 06, 2013  Apr 11, 2014
Printed
Page 283
Step 1

?bg_ex? should be ?03_bg_ex.?

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

MJB  Dec 06, 2013  Apr 11, 2014
Printed
Page 283
First sentence after Step 1

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

MJB  Dec 06, 2013  Apr 11, 2014
Printed
Page 287
first pgh., #1 in bold print.

"Return to your text editor and the images.html page."

Should be "bg_images.html page."

Ed Collins  Nov 07, 2013  Apr 11, 2014
Printed
Page 288
Note

Refers to page 255. Well, 255 does mention the background property, but it doesn?t say anything about it being better than list-style-image. Did you mean the top of 178?

Note from the Author or Editor:
note should say
As discussed on page 178

MJB  Dec 06, 2013  Apr 11, 2014
Printed
Page 288
First paragraph of ?Giving the Sidebar? section

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

MJB  Dec 06, 2013  Apr 11, 2014
Printed
Page 289
The code in step 2.

The "background" related code should not appear in bold since it was entered already in the previous step. Only the "padding" related code should appear in bold.

Scott McLeod  Aug 20, 2013  Nov 01, 2013
Printed
Page 289
Step 3

The code for .announcement li { ... } instead of starting with a dot, as in styling a class, starts with a #, as in styling an id

Note from the Author or Editor:
change the first line of code in step 3 from
#announcement li
to
.announcement li

Eduardo Adipe  Jan 31, 2014  Apr 11, 2014
PDF
Page 290

In order for the top and bottom scroll to display in IE8, I needed to add the meta declaration to the head section.

<meta http-equiv="X-UA-Compatible" content="IE=edge">

Once added, everything worked as described.

Note from the Author or Editor:
add step 5 on page 291.

Lastly add
<meta http-equiv="X-UA-Compatible" content="IE=edge">
To the <head> area of the page. Above the <title> is a good place. This code isn't always necessary, but IE8 can be set to display using "IE7-mode" which won't work. Adding this <meta> tag forces IE8 to really display the page as IE8.

Ryan Rickerl  May 07, 2013  May 31, 2013
Printed
Page 291
Paragraph before Step 5

[This is about the files, not the text.] The finished bg_images.html file is identical to the beginning file.

Note from the Author or Editor:
new files are coming check the website

MJB  Dec 06, 2013  Apr 11, 2014
ePub
Page 292
Figure 10-7

In Figure 10-7 the boxes show a negative Rotation of 45 degrees (-45deg) but the text indicates a positive rotation (45deg)

Note from the Author or Editor:
The text in the boxes pictures in figure 10-7 should say
rotate(-45deg)

Anonymous  Aug 13, 2013  Nov 01, 2013
Printed
Page 295
First sentence of ?Targeting Particular Links? section

Says ?basic a tag styles.? Should be ?basic <a> tag styles.?

MJB  Dec 10, 2013  Apr 11, 2014
Printed
Page 296
NOTE section

Incorrect page number referenced.

Is: "as explained in the box on page 296.

Should be: "as explained in the box on page 294.

Donald McRoberts  Apr 20, 2013  May 31, 2013
Printed
Page 298
Figure 9-1, second sentence

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).

MJB  Dec 10, 2013  Apr 11, 2014
Printed
Page 301-302
Second Sample Button Code

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);

Donald McRoberts  Apr 22, 2013  May 31, 2013
Printed
Page 305

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."

Ed Collins  Nov 18, 2013  Apr 11, 2014
Printed
Page 307
Workaround Workshop box - 3rd paragraph, last sentence

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

Donald McRoberts  Apr 22, 2013  May 31, 2013
Printed
Page 307
Workaround Workshop

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.

MJB  Dec 10, 2013  Apr 11, 2014
Printed
Page 307
Horizontal Navigation Bars section, third sentence

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"

MJB  Dec 10, 2013  Apr 11, 2014
Printed
Page 308
Narrative in FIGURE 9-6

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

Alan Anderson  Nov 07, 2013  Apr 11, 2014
Printed
Page 309
section 3 ("style the links.")

#s 3 and 4 in fig. 9-6 are referenced, but the fig. only shows three items

Note from the Author or Editor:
In the paragraph under "3. Style the links," last sentence, please delete "and #4."

Barry Mark  Mar 31, 2013  May 31, 2013
Printed
Page 310
United States

The first sentence on page 310 reads, "Web browsers treat the carriage return after one </li> and before the next <li> as a space."

That seemed too quirky to be true. I could not imagine why all browsers would treat a carriage return in such a situation as a space. So I dug into it, and through experimentation discovered the following.

The broader principle involved is that for any inline HTML elements in a containing element, web browsers collapses any untagged embedded white space--that is, any white space after a closing tag and before a next opening tag ( whether the same kind of tag or not)-- to a single space. The case of one </li> separated from a following </li> by any white space--one or more spaces and/or carriage returns and/or tab characters--will result in a singe space rendered because of the above principle, not because the browser treats a carriage return as a space.

For example, the following involves white space created by only spaces (no carriage returns or tabs characters), and a browser will collapse that white space to a single space.

<li> .... </li> <li> .... </li>

The case discussed in page 310 involves more white space than just a carriage return; the white space also includes spaces and/or tabs for indenting the line that follows in the source code before the next opening tag is encountered.


Note from the Author or Editor:
Change the first line of page 310 to:
Web browsers treat any white space (a tab, carriage return, or space character) between a closing </li> and the next <li> as a space.

Alan Anderson  Jan 25, 2014  Apr 11, 2014
Printed
Page 318
Step 3, second sentence

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.."

MJB  Dec 10, 2013  Apr 11, 2014
Printed
Page 320
1st Paragraph - figure reference

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)."

Don McRoberts  Apr 28, 2013  May 31, 2013
PDF
Page 321
Instruction step 1, paragraph line 2

mailto,: should be mailto:

Susan Carpenter  Feb 07, 2013  May 31, 2013
PDF
Page 329
Step 4

Step 4 in Page 329
it?s easy to create a descendent selector to highlight the Features link.
should be
it?s easy to create a descendent selector to highlight the Home link.

Li Min Yu  Nov 08, 2013  Apr 11, 2014
Printed
Page 330
Code for step 6

Part of the selector reads, ".expert .experLink", whereas it should clearly read ".expert .expertLink".

Note from the Author or Editor:
change
.expert .experLink
to
.expert .expertLink

(there's a t in expertLink)

pydsigner  Jan 15, 2013  May 31, 2013
Printed
Page 331
sentence before step 3

In section 'From Vertical to Horizontal' before step 3 sentence displays "..big secret of vertical nav bars- placing the buttons side by side."

Should read "..big secret of horizontal nav bars- placing the buttons side by side."

Note from the Author or Editor:
sentence following step 2 should read:
And now it's time for the big secret of horizontal nav bars -- placing the buttons side-by-side.

Daniel  Jan 06, 2014  Apr 11, 2014
Printed
Page 333
Step 6 - border-left statement

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;

Don McRoberts  Apr 28, 2013  May 31, 2013
Printed
Page 333
Last sentence in main text

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"

MJB  Dec 10, 2013  Apr 11, 2014
PDF
Page 333
Step 7

Step 7 in Page 333
.expert .experLink,
should be
.expert .expertLink,

Li Min Yu  Nov 08, 2013  Apr 11, 2014
Printed
Page 340
Third pgh.

Second sentence: "In the fight image in Figure 10-4 ...". Should be "In the RIGHT image." More importantly, description in pgh. doesn't match that in figure 10-4. The description in the pgh. appears to be correct.

Note from the Author or Editor:
In third paragraph change

"In the fight image"
to
"In the middle image"

Ed Collins  Dec 20, 2013  Apr 11, 2014
Printed
Page 347
Top of page, first pgh. after code.

"The first property?transition-property?specifies which properties to animate." This refers to the code at the top of the page. But transition-property is actually the second property, not the first.

Note from the Author or Editor:
change the first sentence in the top paragraph (after the code) to:

The transition-property specifies which properties to animate.

Ed Collins  Jan 03, 2014  Apr 11, 2014
Printed
Page 349-350
second to last paragraph on p.349 and fig. 10-8 on p.350

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.

Lorenzo  Sep 08, 2013  Nov 01, 2013
Printed
Page 351
Top of page in Power Users' Clinic

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

Ed Collins  Jan 22, 2014  Apr 11, 2014
Printed
Page 353
second paragraph, second sentence

second sentence should read

"To use it, simply list the property, duration, timing function and delay in a space-sparated list."

change second instance of "duration" to "delay"

David Sawyer McFarland
David Sawyer McFarland
 
Feb 06, 2013  May 31, 2013
Printed
Page 353
United States

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"

Anonymous  Aug 20, 2013  Nov 01, 2013
Printed
Page 353
United States

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

Anonymous  Aug 20, 2013  Nov 01, 2013
PDF
Page 360
code in last paragraph

The lines:
animation-name: fadeIn;
animation-duration: 1s;
appear at both the beginning and end of the block of code below. Is this correct?

.announcement {
animation-name: fadeIn;
animation-duration: 1s;
-webkit-animation-name: fadeIn;
-webkit-animation-duration: 1s;
-moz-animation-name: fadeIn;
-moz-animation-duration: 1s;
-o-animation-name: fadeIn;
-o-animation-duration: 1s;
animation-name: fadeIn;
animation-duration: 1s;
}

Note from the Author or Editor:
Page 360, code at bottom of page. Remove lines 3 and 4 of code:
animation-name: fadeIn;
animation-duration: 1s;
those lines aren't needed since they appear again (in the correct spot) at the bottom of the code block

Susan Carpenter  Feb 08, 2013  May 31, 2013
Printed
Page 362
2nd paragraph

When the paragrapph starts it says "You can also delay the beginning of the animation using the property."
It seems like it ends twithout specifying the property, it would be much better if it said "You can also delay the beginning of the animation using the animation-delay property."

Note from the Author or Editor:
First sentence of second paragraph should read:

You can also delay the beginning of the animation using the animation-delay property.

(note: animation-delay should appear in code font)

Eduardo Adipe  Jan 31, 2014  Apr 11, 2014
Printed
Page 367
Middle pgh. just below code

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

Ed Collins  Jan 14, 2014  Apr 11, 2014
PDF
Page 368
Figure 10-10, second line

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

Susan Carpenter  Feb 08, 2013  May 31, 2013
PDF
Page 368
Instruction, step 5

nav a:hover {
background-color:

should read

nav a:hover {
background-color: red;

Susan Carpenter  Feb 08, 2013  May 31, 2013
Printed
Page 368
Code under "5. Locate..."

In "5: Locate the nav..." it instructs us to add background-color: red and says the code below reflects that, but the red value is missing from the code.

Note from the Author or Editor:
In step 5, the second line of code:
background-color: red;
should be BOLD

Ed Collins  Jan 14, 2014  Apr 11, 2014
Printed
Page 376
first paragraph

The text says: This chunk of HTML creates the very simple table pictured in Figure 11-2.

The ensuing HTML code creates a three-column table, but the table in Figure 11-2 has a fourth column.

Note from the Author or Editor:
the fourth column should not be pictured in Figure 11-2

Will Mahoney-Watson  May 09, 2013  May 31, 2013
Printed
Page 380
Note blurb at top of page

"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")

pydsigner  Feb 01, 2013  May 31, 2013
Printed
Page 380
Creating Borders paragraph, last sentence.

The sentence reads:

"understand the how web browsers..."

Should read:

"understand how web browsers..."

Don McRoberts  May 14, 2013  May 31, 2013
PDF
Page 391
Instruction step 4, 1st paragraph, 2nd line

tag with the ID of inventory

should read

tag with the class of inventory

susan carpenter  Feb 09, 2013  May 31, 2013
Printed
Page 391
2nd sentence in step 2.

The 2nd sentence reads:

"This table has an class of inventory..."

It should read:

"This table has a class of inventory..."

Don McRoberts  May 15, 2013  May 31, 2013
Printed
Page 393-394
Step 9

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.

Don McRoberts  May 15, 2013  May 31, 2013
Printed
Page 395
Pgh. under "1. Open the file form.html ..."

The paragraph says "Start by bringing down the size of the type in the form." I have tested the code in Firefox and Chrome, and the code given in step 2 increases the size of the text instead of decreasing it.

Note from the Author or Editor:
Last sentence in paragraph following step 1 should read:

"Start by increasing the size of the type in the form to make it more readable."

Ed Collins  Jan 17, 2014  Apr 11, 2014
PDF
Page 396
Step 5.

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

Anonymous  Jun 04, 2013  Nov 01, 2013
PDF
Page 408
last paragraph, 3rd line

You can only use an ID

should read

You can also use an ID

susan carpenter  Feb 09, 2013  May 31, 2013
Printed
Page 419
step 4, first sentence

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"

Lorenzo  Sep 15, 2013  Nov 01, 2013
Printed
Page 422
1st paragraph, 2nd sentence

The sentence should read:
If the total width af all the columns is more than the space available...

Note from the Author or Editor:
change "less" to "more" in "If the total width of all the columns is less a than the space available."

Lorenzo  Sep 15, 2013  Nov 01, 2013
Printed
Page 428
fourth line

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

Peter Szalc  Jan 28, 2013  May 31, 2013
Printed
Page 430
1st pgh.

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."

Ed Collins  Jan 24, 2014  Apr 11, 2014
PDF
Page 439
Middle

box-sizing: content-box is defined by the book as such:

"The content-box value is how browsers normally work: The width of an element is the total of the left and right border thicknesses, left and right padding, and the CSS width property."

This is not an accurate definition of the content-box property value. It is, however, the definition for the border-box property value.

The following link provides the proper definition of content-box:

https://developer.mozilla.org/en-US/docs/CSS/box-sizing

"This is the default style as specified by the CSS standard. The width and height properties are measured including only the content, but not the border, margin, or padding."

Note from the Author or Editor:
The text in the book is accurate, but could be made clearer. Change the first bullet point text to:
The content-box value is how browsers normally work: the width of an element on the screen is the combined values of the left and right border thicknesses, left and right padding, and the CSS width property.

Clint Kennedy  Feb 19, 2013  May 31, 2013
PDF
Page 446
Instruction step 1, 1st paragraph after the code, 2nd sentence

To keep the respective order,

top, right, left, and bottom padding

would read

top, right, bottom, and left padding

susan carpenter  Feb 10, 2013  May 31, 2013
Printed
Page 447
3rd para

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

Gary Collyer  Jan 24, 2013  May 31, 2013
PDF
Page 451
Middle

The code shown:

nav ul, header h1, footer p {
max-width: 1200px;
margin: 0 auto;
}

Will NOT produce the desired result for the unordered list navigation. This is because another rule is set with greater specificity:

header nav li {
float: left;
padding: 0;
margin: 0;
list-style: none;
}

One solution is to add !important after margin in the new group selector rule, or remove margin from the header nav li rule.

Note from the Author or Editor:
confirmed and fixed in the tutorial files

Clint Kennedy  Feb 19, 2013  May 31, 2013
Other Digital Version
458

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/

Ed Collins  Jan 28, 2014  Apr 11, 2014
Printed
Page 474
last paragraph (4.) 2nd line

books says 'before the <!-- main content goes here --> but this should read before the <!-- first sidebar goes here -->

Gary Collyer  Jan 25, 2013  May 31, 2013
PDF
Page 476
Steps 8. and 9.

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

Anonymous  Jun 04, 2013  Nov 01, 2013
Printed
Page 480
Step 2 - added style data

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;
}

Don McRoberts  May 30, 2013  Nov 01, 2013
Printed
Page 481
Second paragraph of step 3

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

Don McRoberts  May 30, 2013  Nov 01, 2013
Printed
Page 481
Item 4

I Added "float: none" to the .columnWrapper style which made the text squeeze into the window. Otherwise the text scrolled off the page.

Note from the Author or Editor:
Step 4 change the code to:

.columnWrapper {
width: auto;
float: none;
}

Then change the second line of text in the following paragraph to:
"It resets the column wrapper's width to auto (the same as 100%) so it spans the entire width of the page. We don't need the float on this element any more either, since the "sidebar2" column has dropped below.

Andy Lochridge  Jan 22, 2014  Apr 11, 2014
Printed
Page 486
nav li styling code

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;
}

Don McRoberts  May 30, 2013  Nov 01, 2013
PDF
Page 531
Step 5.

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

Anonymous  Jun 05, 2013  Nov 01, 2013
Printed
Page 536
bottom

In 16_finished/css/print.css, all these rules were missing:

.main {
float: none;
}
.mainWrapper, .footer {
overflow: visible;
}
html, body, .banner, .footerWrapper {
background: white;
}
h1 {
font-size: 30pt !important;
}
h2 {
font-size: 16pt !important;
}
p, li {
font-size: 11pt !important;
}

and I had to add .footerMain to this rule:

.banner, .mainWrapper, .footer, .main, .footerMain {
width: auto;
margin: 0;
padding: 0;
}

Note from the Author or Editor:
This is an error in the Missing CD file, which may have already been fixed.

DJPJ  Feb 23, 2013  May 31, 2013
PDF
Page 557
Step 4

Step 4 in Page 557
This selector formats the #homeLink only when it's inside another tag with the ID #home
should be
This selector formats the .homeLink only when it's inside another tag with the class .home

Li Min Yu  Nov 09, 2013  Apr 11, 2014
Printed
Page 605
Last paragraph

`Code` should be `Coda`.

Jiang Hong  Mar 05, 2013  May 31, 2013
Other Digital Version
8982
8982

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

Peter Sale  Sep 24, 2013  Nov 01, 2013