Errata for CSS3: The Missing Manual
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 |
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 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 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 |
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 |
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 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 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 |
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 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 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 |
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 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 |
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 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 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 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 |
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 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 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 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 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 |
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 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 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 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 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 |
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 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 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 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 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 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 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 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 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 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 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 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 |
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 |
Printed |
Page 5
2nd paragraph |
"roots" should be "root".
|
Rajat Sehgal |
Nov 25, 2013 |
Apr 11, 2014 |
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 |
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 |
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 |
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 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 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 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 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
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 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 |
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 |
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 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 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 |
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 157
Note |
Says: “you’ll find a easy-to-use.” Should be “an.”
|
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 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 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 |
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 |
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 |
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 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 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 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 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 68
Second sentence of the note |
Says: “a HTML tag…” Should be “an HTML tag…”
|
MJB |
Nov 03, 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 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 47
top |
In the step 6 example, the closing brace and closing style tag should be bold.
|
MJB |
Oct 30, 2013 |
Apr 11, 2014 |
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 |
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 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 |
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 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 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 |
Oct 29, 2013 |
Nov 01, 2013 |
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 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 |
Other Digital Version |
8982
8982 |
Kindle version:
is: "the enclose ..."
Should be: "then enclose ..."
|
Peter Sale |
Sep 24, 2013 |
Nov 01, 2013 |
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 |
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 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 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 |
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 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 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 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 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 |
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 |
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 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 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 |
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 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 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 |
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 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 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 |
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 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 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 |
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 |
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 |
PDF |
Page 396
Step 5. |
"5. Repeat Step 5 ..."
Should be
"5. Repeat Step 4 ..."
|
Anonymous |
Jun 04, 2013 |
Nov 01, 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 |
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 |
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 |
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 |
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 |
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 |
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 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 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 262
NOTE |
discussed on page 260
should be
discussed on page 265
|
Geoffrey Wade |
May 16, 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 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 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 |
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 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 |
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 |
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 |
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 |
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 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 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 |
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 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 |
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 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 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 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 |
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 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 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 |
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 |
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 |
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 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 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 |
Printed |
Page 605
Last paragraph |
|
Jiang Hong |
Mar 05, 2013 |
May 31, 2013 |
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 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 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 |
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 |
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 |
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 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 |
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 |
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 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 |
PDF |
Page 321
Instruction step 1, paragraph line 2 |
mailto,: should be mailto:
|
Susan Carpenter |
Feb 07, 2013 |
May 31, 2013 |
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 |
Feb 06, 2013 |
May 31, 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 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 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 |
Safari Books Online |
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 |
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 428
fourth line |
is: In Figure 13-9
should be: In Figure 13-8
|
Peter Szalc |
Jan 28, 2013 |
May 31, 2013 |
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 |
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 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 |
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 |
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 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 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 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 |
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 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 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 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 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 |
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 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 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 |
Jan 07, 2013 |
Jan 11, 2013 |
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 |
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 |
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 |
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 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 |
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 |
|