CSS3: The Missing Manual

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.

The following errata were submitted by our customers and have not yet been approved or disproved by the author or editor. They solely represent the opinion of the customer.

Color Key: Serious Technical Mistake Minor Technical Mistake Language or formatting error Typo Question Note Update

Version Location Description Submitted By Date Submitted
Safari Books Online chap 7
Colliding Margins section

Example files for figure 7.4 not included in download. Sure would be nice to have more than the tutorial files in the download.

Anonymous  May 09, 2014 
ePub Page Location 6306
First step in Tutorial "Adding Drop Shadows"

Step 1 directs you to: "open the style.css file you completed in in[sic] the tutorial on Enhancing Images (page 272). You'll update the img style you created before" It goes on the step 2 where you add the box shadow, however, at this point I'm clearly only adding it to the external style sheet I was working on in the previous tutorial. When I follow through on the steps and save the file I won't be making any changes to the current html, so when looking at Figure 8-22 I only see the same page. I assumed we adding the external style sheet to the current folder 08->02_gallery_ex. When I did that, the page was definitely not the same as Figure 8-22. So I assumed that the styles.css in this second tutorial does not get updated and only added the drop box property to the initernal style sheet I was working on. Only then was I rewarded with the same web page style as the one in Figure 8-22 I think the step needs to be re-worded or removed altogether to avoid confusion.

Rafael   Jan 06, 2015 
PDF page 44 , 1st paragraph

hi in the page 44, 1st paragraph you mentioned we can download css sample code, I am from IRAN unfortunately and i can't buy the papered book and i am so curious of learning css by this book , can i ask you help me about this sample css code. thanks a million.

sepideh mohseni  Apr 04, 2015 
Safari Books Online u1idlkp6

<a href=http://augmentin-500-mg.cricket/>augmentin</a> <a href=http://glucophage.space/>glucophage xr</a> <a href=http://synthroid.red/>synthroid</a> <a href=http://buy-rogaine.site/>rogaine</a> <a href=http://buycrestor.club/>buy crestor</a> <a href=http://seroquel-sleep.trade/>seroquel sleep</a> <a href=http://buy-allopurinol.click/>buy allopurinol</a>

Jewellsoync  Jan 09, 2017 
PDF Page 3
Note at base

'page not found' error for link

Anonymous  Jul 10, 2014 
PDF Page 34
4th paragraph

Adobe Browserlab was shut down in March 2013

Anonymous  Jul 10, 2014 
Printed Page 78
NOTE box

In the note - "first child that is a paragraph tag" - is confusing. Since first child will be the first tag appearing after a parent tag. And this translates to me that format first child which is <p> has to be selected. It should be corrected as "first instance of paragraph tag."

Anonymous  May 07, 2015 
PDF Page 81
chapter 3: selectors: identifying what to style

In book is: You can’t string multiple :not()selectors together. For example, the following is invalid: a[href^="http://"]:not([href*="google.com"]):not([href="yahoo.com]) In other words, you can only use :not( )once with a selector. But (http://www.w3.org/TR/css3-selectors/#negation) says: Example: To represent all h2 children of an XHTML body except the first and last, one could use the following selector: body > h2:nth-of-type(n+2):nth-last-of-type(n+2) In this case, one could also use :not(), although the selector ends up being just as long: body > h2:not(:first-of-type):not(:last-of-type)

Anonymous  Apr 14, 2014 
Printed Page 81
7th paragraph

The left parenthesis is missing. You can't use descendant selector (like dev p a, pseudo ... should be You can't use descendant selector (like dev p a), pseudo ...

Yishu Fang  Mar 04, 2016 
Printed Page 87
Top: style instructions for ".note"

Line reads "color: #333;" three digits are missing to make this a legitimate HTML color identfier (is the color supposed to be "#333333"?)

Gary Davis  May 26, 2014 
Printed Page 88
First line of "Creating a Descendant Selector"

The book refers to the selectors_basics.html page. Actually it is the selector_basic.html page (no s after selector).

Paul Verger  May 12, 2014 
Printed Page 89
First line

The reference for "descendant selector" is shown as page 88, but that is part of the current discussion and not informative. The actual explanation of descendant selectors is on p. 65-67.

Paul Verger  May 12, 2014 
Printed Page 110
Code after FAQ

It should be this in 3rd edition of this book: change to .byline a { color: red; } p .email { color: blue; } In this case, the link would be blue. Since p .email appears after .byline a in the style sheet, its properties win out.

Josh  Jul 10, 2014 
Printed Page 112
figure 5-4

change #sidebar p.intro—as in the bottom example. to #sidebar .intro—as in the bottom example.

Josh  Jul 10, 2014 
PDF Page 114
Last code snippet

Text says: The previous HTML would change to: <div id="article"> <p>A paragraph</p> <p>Another paragraph</p> <p class="special">A special paragraph</p> </div> but it is exactly the same of the previous one. It should be: <div class="article"> instead.

Peppino Anselmi  Jun 16, 2015 
PDF Page 117

The padding declaration for the ul selector in the CSS reset (folder 5) mentioned in chapter 5 dont have a semicolon (;) at its end. ul { padding-left: 1.4em list-style: square;

Ian  Jan 07, 2015 
Printed Page 117
Step 1

When viewing the Cascade.html file in my default browser (IE 11) I could not see two columns as indicated in step 1. It was obvious that IE was not picking up the external style sheet. As I had used external style sheets many times in the past with no difficulty I compared the <link> statement in the tutorial with mine and the only difference was the absence in the tutorial of the attribute type="text/css". I added this to Cascade.html and the problem was solved. I tried viewing the Cascade.html file, before adding the 'type' attribute, in Firefox, Safari and Chrome without problem. In earlier chapters there are several references to adding type="text/css" if the reader is using HTML4 or XHTML but I assume that all the HTML files in the tutorial folder are in HTML5 therefore this should not be necessary. Perhaps you could consider adding a brief reminder in those tutorials that use external style sheets that this is necessary for those readers using IE 11 or earlier?

Robin Thornton  Feb 06, 2015 
Printed Page 122
Step 3,

First line reads ".intro". It should be "p.intro"

Donald McRoberts  Dec 11, 2014 
Printed Page 122
Step 3.

Oops, jumped the gun on my last input. There is NO error in the text as it is fully explained further down the page... Please delete my last two entries.

Donald McRoberts  Dec 11, 2014 
PDF Page 132
final section on page - 'Using Web Fonts'

"However, you’re limited to fonts your visitors likely to have installed on their computers." The word 'are' is missing, between 'visitors' and 'likely'

Anonymous  Jun 14, 2014 
PDF Page 139
Second bullit

Is now: Line 3 for IE9 Should be: Line 4 for IE?

Anonymous  Apr 13, 2014 
PDF Page 156
2nd paragraph

Red is 0 (it’s also 360, since that’s one full rotation around a circle), yellow is around 50, orange around 100, green around 150, and so on. Each color is separated by around 51 degrees. Actually orange around 50 and yellow around 100.

Rustam Hajiyev  Mar 20, 2015 
PDF Page 189
4rd paragraph

The font-family value is incorret. html { font-size: 62.5%; font-family: Arial, Helvetica, sans-serif; background: rgb(225,238,253) url(images/bg_body.png) repeat-x; } Should be: html { font-family: PTSans, Arial, sans-serif; font-size: 62.5%; background: rgb(225,238,253) url(images/bg_body.png) repeat-x

Ian  Jan 10, 2015 
Printed Page 189
paragraph N° 2

Having completed the tutorial N° 06 my page was different from the finished version. I eventually traced the source of the problem to an error on page 189:- font-family: Arial, Helvetica, sans-serif; should be font-family: PTSans, Arial, sans-serif; Regards, Robin Thornton

Robin Thornton  Feb 05, 2015 
Printed Page 198
1st and 2nd paragraph

I have tried Example of warning sign and margins and I think there is mistake in this example. Its written that "But say you insert a heading inside the warning box, and to put a little room between it and the top and bottom of the div, you set the heading’s margin to 10 pixels. You may think you’re adding 10 pixels of space between the heading and the top and bottom of the div, but you’d be wrong. Instead, the margin appears above the div. In this case, it doesn’t matter how large a margin you apply to the headline—the margin still appears above the div." Actually by doing above steps margin appears inside div and above and below h2. I actuallly got "10 pixels of space between the heading and the top and bottom of the div". THIS WAS MY CODE : .collapsingMargins{ margin: 20px 0 20px 0; } h2{ margin: 10px 0 10px 0; } <h1> Heading</h1> <div class="collapsingMargins"> <h2>DO not try this at HOME</h2> </div>

Shivam   Jun 04, 2015 
Printed Page 201
United States

It says "you cant increase the height of the inline element with top or bottom padding or margin". This is untrue because I can add top and bottom padding. Margin is the only property that will only let you add left and right.

Joseph  Aug 15, 2014 
PDF Page 211
2nd Paragraph

Second Line of 2nd Paragraph says: "A positive element positions the shadow below the ..." It should be... "A positive value positions the shadow below the ..."

Abdul Quadir  Apr 22, 2014 
PDF Page 230
2nd sentence

Shouldn't this: "Click at the end of the closing brace of the body tag selector," be something like this: "Click at the beginning of the closing brace of the style tag,"

Anonymous  Jun 15, 2014 
PDF Page 231
First two lines

Text says: "The headline text is a little cramped—the “T” that begins the headline touches the edge of the background." and as far as I understand CSS, it should be that way. However, in Mozilla Firefox, version 38.0.5 on Linux Fedora 22 this is not the case. The headline content sits in the middle of the green background (horizontally AND vertically, as if it had a padding) even before applying the padding described in the following step 3.

Peppino Anselmi  Jun 22, 2015 
Printed Page 248
Browser Bug

"This happens when the content on a page is shorter than the browser window is tall" Should be changed to.... "This happens when the content on a page is shorter than the browser window."

Nixon  Jul 18, 2014 
PDF Page 256
2nd Last Line in Note Box

Second Last line in Note box says... "accepted shorthand properties - image, position, repeat, placement, and color" It should be: "accepted shorthand properties - image, position, repeat, attachment, and color"

Abdul Quadir  Apr 30, 2014 
PDF Page 260
The first "background-image" code

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

Jurgen  Apr 19, 2014 
PDF Page 260
most examples and description

syntax of gradients was a little changed and now all chapter about gradients have not a right description for example, linear gradient for set position need to use keyword "to" before set a value, for example: linear-gradient(to left....); in radial-gradients the same problem to position starting (center) point of radial-gradient must have keyword "at" before values and now must be after set shape and before color-stop, for example: radial-gradient(circle, at 100px 100px...) so old description and examples now have not working

Oleg  Apr 22, 2014 
PDF Page 262
Code after 2nd Paragraph

The Code after 2nd Paragraph says... background-image: linear-gradient(left, black, rgb(255,255,255), #FFFFFF, HSL(0,0,0%)); It should be... background-image: linear-gradient(left, black, rgb(255,255,255), #FFFFFF, HSL(0,0%,0%)); The percentage sign in the second value of HSL was missing...

Abdul Quadir  May 02, 2014 
PDF Page 285
last two lines before step 1

Text says: "you’ll replace the underline below each <h2> tag in the main text area with a custom graphic that looks like a hand-drawn line." but there is no underline defined for <h2> headings.

Peppino Anselmi  Jun 25, 2015 
Printed Page 325
Figure 10-4

The images of this figure are correct. However, the caption and one word of text above the figure are incorrect. In the figure, the box on the left is a scaling of both horizontal and vertical (-1). The box in the middle is horizontal scaling (-1,1). The box on the right is vertical scaling (1, -1). To correct this: - In the third line from the top of the page, change "vertical" to "horizontal." - In the caption change "The box at left..." to "The box in the middle..." - In the caption change "...box in the middle..." to "...box at the right...". - In the caption change "...and at right..." to "...and at left...".

Mike Olgren  Mar 26, 2017 
Printed Page 325
Figure 10-4

Please disregard previous post on Figure 10-4. That error is in the FOURTH edition.

Mike Olgren  Mar 26, 2017 
Printed Page 326
last line of style in step 7

The "width 175px;" in the last line of the style should be in boldface, to conform with the book's standard. Great book!

Paul Verger  May 20, 2014 
PDF Page 327
Last paragraph of step 9.

Text says: "But it would be easier to apply a bottom border to the <ul> tag containing the list of links. (Since there’s no padding on that tag, there’s no space separating the top of the <ul> from the top of that first link.)" The part inside parenthesis is a bit confusing. We're talking about adding some padding at the bottom of the <ul> tag, but the text talks about "no space separating the TOP of the <ul> tag and the TOP of that first link", which is misleading.

Peppino Anselmi  Jun 30, 2015 
Printed Page 341
1st paragraph

.button:active { -webkit-translate(1px,2px); -moz-translate(1px,2px); -o-translate(1px,2px); -ms-translate(1px,2px); translate(1px,2px); } These should be: .button:active { -webkit-transform: translate(1px,2px); -moz-transform: translate(1px,2px); -o-transform: translate(1px,2px); -ms-transform: translate(1px,2px); transform: translate(1px,2px); }

Karen Schaefer  Dec 14, 2014 
PDF Page 348
Transition Timing 2nd paragraph

The transition-timing-function property can take one of five keywords there are more possible keywords, the missing: steps(), step-start and step-end

Oleg  Apr 24, 2014 
PDF Page 349
Figure 10-8

in Page 349 For example, the Bezier curve pictured in Figure 10-8 starts off steep (the animation begins quickly), then flattens in the middle (the animation slows down), and then grows steep again (the animation rapidly progresses to its final state). To create this kind of animation, add this line of code: transition-timing-function: cubic-bezier(.20, .96, .74, .07); Figure 10-8 In this example, the line starts off relatively flat, meaning the animation will move slowly at first, then ramps up steeply at the end, meaning the animation will quickly progress to the finish at the end of the transition’s duration. should be In this example, the line starts off steep, meaning the animation will begins quickly at first, then ramps up steeply at the end, meaning the animation will quickly progress to the finish at the end of the transition’s duration.

Li Min Yu  May 19, 2014 
PDF Page 370
Step 1

The text basically says that 720deg will rotate the logo three times. It should be TWO times instead. The same mistakes also appear at page 372 first paragraph (step 6)

Peppino Anselmi  Jul 09, 2015 
PDF Page 383
last paragraph

To highlight a column, you can use the background properties. Again, assume you have a <col> tag with a class of price applied to it: .price { background-color: #F33; } Should be To highlight a column, you can use the background properties. Again, assume you have a <col> tag with a ID of price applied to it: #price { background-color: #F33; }

Li Min Yu  Aug 12, 2014 
Printed Page 386
Third bullet point "Text Fields"

First line of third bullet point (Text fields.) <input type"password"> should be <input type="password"> (Missing equal sign)

Anonymous  Oct 13, 2015 
Printed Page 389
first paragraph

"float: left;" should be: "display: inline-block".

Anonymous  Nov 10, 2014 
Printed Page 391
Step 4 | code: line 3

"font-size: 1.3em" should be "font-size: .85em" In the completed version of the tutorial (file) the caption font-size has a value of .85em, which is the right value to make it small. With a value of 1.3em the caption gets bigger.

Anonymous  Nov 10, 2014 
Printed Page 395
3rd paragraph

"bringing down the size" should be "bringing up the size"

Anonymous  Nov 10, 2014 
Printed Page 398
Step 9-10

In keeping with previous text conventions in this book, the new properties added to the styles should be bolded.

Anonymous  Nov 10, 2014 
Printed Page 400
Step 15

"add one last style for the pull-down menu and the three text fields" should be: "add one last style for the three text fields"

Anonymous  Nov 10, 2014 
Printed Page 418
Bottom paragraph

The very last sentence on page 418 of the 3rd edition reads: "The HTML for the floated element must appear before the HTML for the element that wraps around it." I believe what the author intended to say was this: "The HTML for the floated element must appear before the HTML for the element it wraps around." TERRIFIC book! Thank you, Mr. McFarland!

Erik Gloor  May 16, 2014 
Printed Page 428
Last paragraph

"The last two styles make IE6 and IE7" shouldn't that be "The last style makes .."

Anonymous  Nov 15, 2014 
Printed Page 428
4th paragraph

"to add the following two properties" shouldn't that be "to add the following property"

Anonymous  Nov 15, 2014 
Printed Page 430
5th paragraph - 5th line

"you give that column a class .." shouldn't that be "you give that <div> tag a class ..."

Anonymous  Nov 15, 2014 
PDF Page 441
first step, last sentence

the text could be made more clear. You should read: You’ll next add the <div> tag for the left sidebar or if you prefer HTML5: add the <aside> tag.

Jurgen  Apr 29, 2014 
PDF Page 441
first paragraph

in Page 441 <!- first sidebar goes here --> Should be <!-- first sidebar goes here -->

Li Min Yu  Jul 24, 2014 
PDF Page 522
last paragraph

in Page 522 You’ve already seen the @media directive in Chapter 14, for creating media queries to target different features and settings of a web browser (such as screen width). should be You’ve already seen the @media directive in Chapter 14, for creating media style to target different features and settings of a web browser (such as screen width).

Li Min Yu  May 19, 2014 
Printed Page 539
Last Paragraph

From the fourth edition: Last paragraph on p. 539, "For example, in example #6 in Figure 17-7. . ." Figure 17-7 on page 540 only has 5 examples. There is no 6th example.

Michael Walker  Oct 19, 2016 
Printed Page 540
Figure 17-7

From the fourth edition, first release: Figure 17-7 appears to be the same illustration as 17-6.

Michael Walker  Oct 19, 2016 
Printed Page 585
Description of min-height

The text says "If the element's contents aren't as tall as the min-height setting the box's height shrinks to meet the min-height value." I assume it should be "If the element's contents aren't as tall as the min-height setting the box's height increases to meet the min-height value."

Curtis Blaine  Sep 07, 2015 
PDF Page 602
last paragraph

inPage 602 960 Grid System (http://960.gs). One of the better CSS frameworks that provides a set of basic styles and a technique for using divs and class namesto create complex, multicolumn, fixed-width layouts. (You can find a detailed video introduction to this system at http://nettuts.com/videos/screencasts/adetailed-look-at-the-960-css-framework/). Can not find the video introduction URL, where is the new URL? thanks.

Li Min Yu  May 19, 2014 
Other Digital Version 1007

Kindle edition. spreadsheetf instead of spreadsheet. Linking a Style Sheet by Using HTML ... All doctypes require two attributes: rel=“stylesheetf” indicates the type of link in this case, a link to a style sheet.

Dougie Nisbet  Jul 09, 2016 
Printed Page 3262
first sample code block

The property value combinations are incorrect. Should be: .button:active { -webkit-transform: translate(1px,2px); -mx-transform: translate(1px,2px); translate(1px,2px); }

Anonymous  Mar 05, 2016 
Other Digital Version 5270
In the style code for css

This is kindle version. This error occurs in 7th chapter's tutorial. h1 properties are written in the manner h1{ ...... color:#85A110; ........ background-color:rgb(133,161,16); ..... } here color and background color are same , so i won't see any text in h1 tag. the value in finished tutorial is background-color:rgb(226,235,180), which is not written in the kindle book

Anil M  Jun 12, 2014 
Mobi Page 10384
2nd step

On location 10383 of CSS3: The Missing Manual (Kindle version); there seems to be an error in the description of what to cut from the code and paste. Step 2 says to select <!-- FIRST SIDEBAR goes here --> and all the content down to the closing </article> tag then cut and paste above the FIRST SIDEBAR. You can see where this might be a bit confusing. Especially since you just cut out all of the sidebar information from the code. I think this was meant to say: Select <!-- main content goes here --> and all content down to the closing </article> tag then cut and paste above the first sidebar (since we're arranging the main content above the supplemental content in the first sidebar).

Russell Rogers  Mar 14, 2015