Errata
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: |
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: |
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: |
Thea | Jan 12, 2014 | Apr 11, 2014 |
Printed | Page 5 2nd paragraph |
"roots" should be "root". |
Rajat Sehgal | Nov 25, 2013 | Apr 11, 2014 |
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 | |
Page 7 last two lines |
Sublime Text is also available for Linux and Windows. Note from the Author or Editor: |
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: |
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: |
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: |
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: |
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: |
MJB | Oct 30, 2013 | Apr 11, 2014 |
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: |
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: |
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 |
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: |
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: |
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: |
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 |
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: |
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: |
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: |
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: |
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: |
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: |
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 |
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 | |
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: |
Keith MacD | Apr 13, 2013 | May 31, 2013 | |
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: |
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: |
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: |
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: |
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: |
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: |
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: |
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: |
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 |
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: |
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: |
Puneet Lamba | Apr 08, 2013 | May 31, 2013 |
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 | |
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: |
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: |
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: |
MJB | Nov 03, 2013 | Apr 11, 2014 |
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: |
Keith MacD | Apr 28, 2013 | May 31, 2013 | |
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 | |
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 | |
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: |
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: |
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: |
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: |
MJB | Nov 04, 2013 | Apr 11, 2014 |
Page 143 3rd paragraph |
Opening tag instead of the closing one "...<em>anything<em>..." Note from the Author or Editor: |
Anonymous | Jun 01, 2013 | Nov 01, 2013 | |
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: |
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: |
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: |
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: |
MJB | Dec 06, 2013 | Apr 11, 2014 |
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: |
MJB | Nov 04, 2013 | Apr 11, 2014 |
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: |
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: |
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 |
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: |
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: |
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: |
Ed Collins | Sep 17, 2013 | Nov 01, 2013 |
Page 188 Instruction Step 3 |
..main should be .main Note from the Author or Editor: |
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 |
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: |
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: |
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: |
pydsigner | Jan 15, 2013 | May 31, 2013 |
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: |
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: |
MJB | Nov 05, 2013 | Apr 11, 2014 |
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: |
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: |
MJB | Nov 05, 2013 | Apr 11, 2014 |
Page 231 Step 3. |
Only "padding: 5px 15px 2px 15px;" should be in bold Note from the Author or Editor: |
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: |
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: |
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: |
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: |
MJB | Dec 06, 2013 | Apr 11, 2014 |
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: |
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 |
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: |
Nathan Walsh | Jul 15, 2013 | Nov 01, 2013 | |
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: |
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: |
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: |
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: |
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: |
Anonymous | Jan 29, 2014 | Apr 11, 2014 |
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 |
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: |
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: |
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: |
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: |
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: |
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: |
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: |
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: |
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: |
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: |
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: |
Eduardo Adipe | Jan 31, 2014 | Apr 11, 2014 |
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: |
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: |
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: |
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: |
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: |
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: |
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: |
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: |
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: |
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: |
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: |
Don McRoberts | Apr 28, 2013 | May 31, 2013 |
Page 321 Instruction step 1, paragraph line 2 |
mailto,: should be mailto: |
Susan Carpenter | Feb 07, 2013 | May 31, 2013 | |
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: |
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: |
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: |
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: |
MJB | Dec 10, 2013 | Apr 11, 2014 |
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: |
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: |
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: |
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: |
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 |
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: |
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: |
Anonymous | Aug 20, 2013 | Nov 01, 2013 |
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: |
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: |
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 |
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 | |
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: |
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: |
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: |
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 |
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: |
Ed Collins | Jan 17, 2014 | Apr 11, 2014 |
Page 396 Step 5. |
"5. Repeat Step 5 ..." Should be "5. Repeat Step 4 ..." |
Anonymous | Jun 04, 2013 | Nov 01, 2013 | |
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: |
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: |
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: |
Ed Collins | Jan 24, 2014 | Apr 11, 2014 |
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: |
Clint Kennedy | Feb 19, 2013 | May 31, 2013 | |
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: |
Gary Collyer | Jan 24, 2013 | May 31, 2013 |
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: |
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: |
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 |
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: |
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: |
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: |
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 |
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: |
DJPJ | Feb 23, 2013 | May 31, 2013 |
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 |