CSS Cookbook

Errata for CSS Cookbook

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
PDF Page xix
Last para

The first sentence says "If this is a hurdle, I recommend that you download the code from the O’Reilly website to get a firsthand look at a working example."

The code is not present on the O'Reilly website. Nor is it present on In fact, doesn't acknowledge the 3rd edition at all! It talks about the 'NEW! Second Edition'.

fat-hen  Feb 07, 2010 
Printed Page ch01.txt, line 161
in the code examples,

In the Code Examples zip (, there are 14 .txt files, with the code for each chapter. However, the css in these files contains rules that reference images, yet the images are not included in the download. Is there a place the images are hosted? I would like to build the examples in the book as I always do, and without the images I will not be able to build the examples cited.
Thanks for your help!

cthien  Mar 11, 2010 
PDF Page xix
Last para

At long last and after several requests and questions the source code has been made available. However it is not complete, being missing graphics files which are referenced in the code and without which it is impossible to use in its entirety.

In addition, the code is very poorly laid out and difficult to use. It looks like someone's school homework that was done on the bus - done as quickly as possible to get something handed in. This is not acceptable, and I consider the book to be unfit for purpose. It is severely sloppy workmanship that is not up to the usual high standard I expect from O'Reilly.

Bryan  Apr 06, 2010 
PDF Page xix
Last para

Is there any chance of the *COMPLETE* source code being posted somewhere? This is becoming a joke. I note that the author invites us on his web site to post a review on Amazon. I shall go and do that now, and it will not be favourable. I've been raising this issue for months now and *nothing* has been done. Not impressed.

Anonymous  Apr 15, 2010 
Printed Page all
in the code examples,

I wrote about this 2 months ago, but never received a response. I was wondering if there was a place that the images referenced in the css could be downloaded from, so I could build the screens of the examples.

cthien  Apr 23, 2010 
Printed Page xxi
3rd and 4th paragraphs

The description paragraphs for Chapter 10 and 11 should be reversed. The chapter numbers and titles are correct, but the descriptions afterward are switched.

laertes13  Sep 21, 2010 
Other Digital Version x
example code file

Chapter 7's code on your web site [ ] has an error in it. The code is on page 359 in the book.

#navsite p {
display: none;
a {
text-shadow: 0 −1px 0px rgba(0,0,0,.8);

I believe it should be:
text-shadow: 0 -1px 0px rgba(0,0,0,.8);

Anonymous  Mar 21, 2011 
Printed Page 1
First source code example

The second line of sample code is <head>, so the fourth line of code should be </head>, but it is missing the / in the book.

Mike Hubbartt  Aug 24, 2010 
PDF Page 1
section 2.2 - "solution" 9th line: {font-family: verdana, arial, sans-serif;}

Font names should be capitalized as per the CSS standards. For example, write "Ariel", not "ariel" and "verdana" should have been written as "Verdana". Only generic font families, such as "sans-serif" can be written in small-caps (which has been rightly done so on this page)

Naveen  Nov 08, 2010 
PDF Page 10
Code example for "The smallest web page ever" at the top of the page

The closing tag is missing the '>' character in the PDF version.

<!DOCTYPE html>
<title>Small HTML5</title>
<p>Hello world</p

statrixbob  Sep 15, 2010 
Printed Page 38
In the solution portion in the body tag.

It should be a closing paragraph tag </p> not an open one <p>.

Jesse Bradley  Apr 03, 2010 
PDF Page 38
Page 1 section 2.2 - "solution" 9th line: {font-family: verdana, arial, sans-serif;}

Font names should be capitalized as per the CSS standards. For example, write "Ariel", not "ariel" and "verdana" should have been written as "Verdana". Only generic font families, such as "sans-serif" can be written in small-caps (which has been rightly done so on this page)

SimplySmart  Nov 08, 2010 
Mobi Page 44
first paragraph

"ID selectorsresemble class selectors" should be "ID selectors resemble class selectors"

No Starch  Aug 23, 2013 
Printed Page 47
Last Sentence

Presently it reads, "...the first strong element was not underlined..." when it fact it was. It should read, "...the second strong element was not underlined..."

Charity Slepcevic  Oct 03, 2010 
PDF Page 51
last paragraph

The example given with the Attribute selector [attribute|=val] is wrong.

- quote -
For example:
a[title|="anti"] {
color: red;
As a result of the preceding code, whenever the word anti appears in the title attribute of an anchor element, the link is colored red.
- end quote -

From the site: "Represents an element with the att attribute, its value either being exactly "val" or beginning with "val" immediately followed by "-" (U+002D)."
E.g. in above sample, it will act on the attribute "anti", "anti-nl", "anti-gb" etc, not as stated in the text "whenever the word anti appears in the title attribute".

Frank Prins  Nov 16, 2010 
Safari Books Online 57

Section 2.8
Reader is given Html mark up and then CSS markup , I asume to produce a web page

the Two don't work together. Html has markup for header ID and CSS markup has banner.

One navigation ID in the Html and nav1 and nav2 in CSS

Read page 56 thru 59 and you'll see what I mean. And what the heck is with the

div id=blipverts

Thank you ever so much.

Tom  Jun 07, 2012 
Printed Page 68
1st paragraph

The first paragraph refers to Figure 2-25 as having a margin of 0px. But the example shows the two div elements as having some space (aka margin) between the two. Am I missing something?

Anonymous  Sep 04, 2010 
Printed Page 96
Discussion section, first paragraph

The first paragraph in the Discussion section mentions that the preceding sample code tells the browser to position the element exactly 40 pixels down from the top and 20 pixels over from the left edge of the window. However, the code lists bottom: 50px and left: 100px.

Louis Spear  Apr 27, 2010 
Printed Page 107
Fig. 3.1

The bottom padding, border, and margin are placed inconsistently relative to the other sides.

Jerry Goldin  Feb 06, 2010 
PDF Page 242
last paragraph

the linear gradient property code of #header selector for mozilla is completely wrong:
background-image: -moz-linear-gradient(left top, left bottom,
from(rgba(153,51,0,.3)), to(#6b3703), color-stop(0.5, #903000));

It was mistakenly composed as an analogue for web-kit engine.

Indeed it should be as follows:
background-image: -moz-linear-gradient(top, #930, #903000, #6b3703)

or it may use % like this:
background-image: -moz-linear-gradient(top, #930 30%, #903000 50%, #6b3703);
but it doesn't a visible effect for this example

for opera also analogous code works:
background-image: -o-linear-gradient(top, #930, #903000, #6b3703)

rb gall  Jun 01, 2011 
Printed Page 278
In the code example

Half the width of the image (256px) is 128, not 138px as stated in the code.

Louis Spear  May 25, 2010 
Printed Page 572
End of 2nd paragraph

This references an image replacement technique discussed in Recipe 3.10, however, Section 3 is about typography. Perhaps Recipe 4.10 was meant?

Charity Slepcevic  Sep 26, 2010 
Printed Page 589
body { section at top of page

The book says to set the background-attachment property to fixed for the body tag section, however, the background-attachment belongs solely in the #easel { section for this Recipe 13.9 to work. I also found it necessary in Firefox to 3.6.9 to add margin and padding statements in the body tag section so that the fireworks.png completely covers the bkgd.jpg.

Below are the revised and corrected sections:

body {
font-size: 62.5%;
background-color: #fff;
background-image: url(bkg.jpg);
background-position: center;
background-color: white;
margin: 0;
padding: 0;

#easel {
background-image: url(fireworks.png);
background-attachment: fixed;
width: 100%;
height: 100%;

It figures that this was the very first Recipe that I went to try and Murphy's Law said it would not work - ha ha!

Charity Slepcevic  Sep 26, 2010 
Printed Page 589
Last line

The period is missing at the end of the very last sentence on this page, ending in "window."

Charity Slepcevic  Sep 26, 2010