CSS: The Mssing Manual, First Edition
by David Sawyer McFarland

The unconfirmed error reports are from readers.

If you have technical questions or error reports, you can send them to
booktech@oreilly.com.  Please specify the printing date of your copy.

This page was updated August 8, 2008.

Here's a key to the markup:
	[page-number]: serious technical mistake
	{page-number}: minor technical mistake
	<page-number>: important language/formatting problem
	(page-number): language change or minor formatting problem
	?page-number?: reader question or request for clarification


Unconfirmed errors:


{1} Chapter 8, section 8.7.4 at point 7, ;
The sentence

?Locate the .sidebar h3 style in the external style sheet?

should be changed into

?Locate the .sidebar h3 style in the internal style sheet?


[1] Chapter 9, section 9.5.5, point 9;
At the beginning of point 9, the text reads: "Remove the top border..."

But there ain't any Top border to remove in the code. The instructions then go further in a divergent 
direction from trainee's experience.

The text follows with a "The last link's bottom border is now gone", while this is not what the trainee 
sees on the screen. At point 10, the text againg reads: "Add a top border" and the following code shows 
an adding of the "border-bottom" property.

It's a little mess.

The point of departure to fix the whole thing is when the author, in point 8, writes: "You still have a 
couple of things to fix:... and the border between each button is 2 pixels thick".
Is the procedure to fix this problema that somehow came out wrong.


{1} chapter 9, section 9.5.3 Highlighting..., point 4;
In the code there is a line that has no meaning and no effect:
"background-image: url(images/globe_highlight.png);"

The line should be deleted.

The line was probably left over from a previous draft.

This seems to be confirmed by the support files collected in the companion Website. In the files for 
chapter 9, there is NO "globe_highlight.png" image.


[1] Chapter 11, all;
In all chapter 11, the many references to "Section 11.1" and "Section 11.1.1" are wrong and should be 
corrected.
Just one example.
In subsection "11.1.1 The Mighty <div> tag", at the end of the second paragraph, you may read "(You'll 
get a chance to work with a wrapper <div> in the tutorial in Section 11.1.1)"
Which is a nonsense because you are in section 11.1.1 and it's not one of the two tutorials of the 
chapter.


(10)7th paragraph;
The web address for Missing Manuals should be http://missingmanuals.com/ not http://www.missingmanuals.com/ as shown.


(31) top;
font-face: Arial;

Maybe it's my editor, but this didn't change the font from default to Arial. I had to use font-family: 
Arial; to make it work


{35} Workaround Workshop, 4th Paragraph;
Instructions for accessing Firefox's cache are inaccurate. They say to go through the "Privacy" button to 
access the "Cache" tab and set disk space to zero.

It s/b (at least on my Mac, running Mozilla/5.0 Firefox/2.0.0.6) advising in Preferences to click on the 
"Advanced" button and under the "Network" tab to access the box to set the cache to "0".


{35} under note but please refer to description below;
I wasn't able to find another way to contact you so I'm using this route. I just downloaded the 
tutorials. When I click on chapter one and then click on images, I am given a macromedia fireworks box 
which is asking me for my first and last name, organization and serial number. The first and last name, 
and serial numbers are required fields, which means that I am unable to open this file. Perhaps this will 
happen again with future files. Is there a way to access all the files in the tutorial?


<36>step4;
The period at the end of "type font-size: 4em;." would be entered by a novice because it's very unclear that this is book punctuation rather than code to be entered.

The same issue happens on p37 (steps 1, 2 and 3).

Would be better if the code was shown as code rather than embedded within the text.


{40} Step 7, line 2;
Current text:
(between the closing title tag and the opening body tag)

Should read:
(between the closing title tag and the CLOSING HEAD tag)


{41} In the "Note:" section.;
Text reads:

"mistyped the code from step 6"

It should read:

"mistyped the code from step 7"


(51) many occurences;
English is not my mother tongue, but I thought that "descendent" was spelled "descendant".


(78)Second to last paragraph, #1 bullet item;
The paragraph reads "1. Enter (Return) to your text editor and the inheritance.html file."

It should read "1. Return to your text editor and the inheritance.html file."

The statement errantly referred to the Windows/Mac keyboard buttons rather than the action of going back to the page in the text editor.


{88} Box;
Not really an error, more an update:
The Firefox extension Firebug is much more powerful and shows all the styles, including those which are 
over-ridden.


{113}2nd paragraph;
The note about percentages or ems being better units than pixels for specifying line spacing is also very much applicable to the letter and word spacing properties discussed just before. Might be better to have this note in a sidebar so it refers to both sections rather than just line spacing.


(124) Item 5;
as you follow those steps and jump to item 8 on page 125 it tells you that "The text on the page changes 
color and font".

The color does not chage since that color code #102536 will show as "black" and not the "dark blue" you 
state on the manual.


(124) The Note paragraph;
".2em is 20 pixels"

I'm afraid that given 10 pixels as a starting point, .2em might be 2 pixels instead of 20 pixels.


<125>step 2;
The hex color value is shown with an uppercase B. Previously all hex values have been given with lowercase letters.


(128) 3rd paragraph;
The book says "bottom-margin property" in this sentence when it should be "margin-bottom"


{131} item # 8.;
Tutorial files:
External style sheet layout.css in \chapter_06_finished\ does not match layout.css in \chapter_06\. This 
drove me nuts trying to figure out why my finished "text.html" file didn't match the your 
"text_finished.html" file. The mainNav list was shifted to the right in yours. I finally thought to check 
the layout.css files in each folder, and saw

#mainNav {
float: left;
width: 175px;
margin-top: 20px;
padding-left: 10px;
}

instead of

#mainNav {
float: left;
width: 175px;
margin-top: 20px;
}

in \chapter_06\layout.css

Not fair!


(138) 2nd and 3rd paragraphs, the "note", plus Figure 7-4:;
The example given of a headline with a margin inside a div doesn't make sense at all and doesn't correlate well with the 
figure which is supposed to illustrate it nor the "note" about collapsing margins.

It starts off by explaining that when you put an element like a heading inside a div and apply a vertical margin to it, 
then that margin appears above the div instead of inside it. The "note" right after this statement says that "this 
phenomenon's known as 'collapsing margins', meaning two margins actually come one".

To a beginner, this is confusing and doesn't make sense. The note doesn't offer any explanation for what's just been 
said, which is that a vertical margin applied to an element inside a div appears above the div. That isn't "known as 
collapsing margins", it's known as a margin appearing above a div. The collapsing margins part, if I have worked it out 
correctly, comes into it when the margin which thus appears above the div collapses into the margin which already 
separates the div from the element above it. No explanation is offered as to why a margin applied to an element inside a 
div appears above the div, which is something which is bound to be confusing and illogical to a beginner (it certainly 
was to me)

What makes it worse is that the figure which follows this confusing non-explanation doesn't help matters at all. 


(156 - 157) last paragraph of 156, first paragraph of 157;
Last sentence of page 156 reads "The last photo(3) isn't wide enough to sit next to the second photo (2)" but surely 
should read "is too wide to sit next to the second photo"


{158,159} controlling page margin;
Several errors:
1. the page sidebar.html does not look as shown in figure 7-15, specifically the list in not enumerated.
2. step #3, there is no </link> tag for the external style sheet. There is a /> closing tag, as there 
should be according to page 33 at the top of the page.


(167) figure 7-18;
Figure 7-18 shows what the completed tutorial should look like for chapter 7: Margins, Padding and 
Borders.

I tested the finished tutorial in IE 7, Netscape 9, Firefox 2 and Opera v 9.25. All appeared as the 
illustration in the book EXCEPT Opera.

I also tested the completed file provided with the tutorials that are available to download.

The problem is the sidebar is supposed to be float: right and the rest of the page content moves up and 
wraps itself around this sidebar.

In Opera, however, this doesn't happen and instead, the page content stays below the sidebar. 


(179) 3rd paragraph;
In discussing using negative values for image placement, the text says "you can use negative values to move an image off 
the right edge". Surely this should be "off the left edge".


{183} Frequently Asked Question box;
The web site referenced for free photos, www.morguefile.com has turned into a commercial page for 
assorted stuff, but no photos, free or otherwise.

The link http://www.k10k.net/frames.aspx?section=patterns is broken. The new link is http://www.k10k.net/
pixelpatterns/.

The link http://www.kollermedia.at/index.php/pattern4u has changed to http://www.kollermedia.at/
pattern4u.


{183} 4th line left column in Finding Free Imagery section;
Safari can't open the page http://www.stylegala.com/ because it can't find the server www.stylegala.com.

the stylegala website is nowhere to be found. Do know if this is just a simple non-universal networking 
issue or the website is down.


(186) second paragraph, labeled item 1.;
Item 1 say to open the file chapter_08>caption_ex>caption.html folder. This is not correct. It should 
read to open the folder chapter_08>caption_ex>caption.html file.


[188] Item #10;
Where it says "margin: 10px 0 0 0;" for the font of a caption under a figure, I found that this only 
works properly if the top margin is the height of the image plus any additional padding. In both Firefox 
2.0.0.7 and IE7, the text would not display below the figure without this. I discovered it through trial 
and error by increasing the number until it fit. You can see an example of this in the code of every 
image at http://www.rubber.org/expos/expo07.html


{189} Section 1. Paragraph 1;
"The page contains nine photos and photo captions."

There are only six of each.


{205} Paragraph numbered "7";
Says "Locate the .sidebar h3 style in the external style sheet".
I think it should be "internal style sheet".


(216) end of section ;
Unix/Linux systems can use gphoto2


{220} 2nd paragraph;
The text says that setting a width for any tags that wrap around links, for instance the <li> or <ul> tag, will suffice 
to make the width of the links equal. I tried this in both Firefox and IE7 and setting the width of the containing <li> 
tag does not do the trick, while setting it for <ul> does. 


{238} 2nd paragrpah, starting with digit 4;
At line 22 (from top) of page 238 of book CSS: The Missing Manual contains string
"background-image: url(images/globe_highlight.png);"
which is invalid, because,

1. This is a new string in that code, so it should be in bold letters.
2. There is no such image globe_highlight.png in images directory of tutorial files downloaded.
3. The paragraph above it doesn't mention about a new image in :hover effect, since the hover effect 
comes from old globe.png image only.

Conclusion: This line should not be the part of code.


[238] Item 4 of the Tutorial;
4. Edit the style you just created by adding a background-color property:

#main a.external:hover {
background-position: right -24px;
color: #152D6A;
background-image: url(images/globe_highlight.png);
background-color: #FFF;

Note: The addition is the last line which is "bold" background-color: #FFF; (this part is correct). 
However, if you pay close attention to the style, you see that the background-image is also included. If 
you add this line (which is not in the images folder) then when you hover your mouse over the link, the 
globe just dissapears.

The background-image: url(images/globe_highlight.png); is erroneous, just ignore that line and do not add 
it to the style.


(238) Step 4;
In Step 4 of 'Highlighting External Links' the line
background-image: url(images/globe_highlight.png);
should not be there - the image isn't even in the images folder! The line doesn't appear in the 
bathtub_finished.html file, either.


{238} Step 3 of tutorial;
Step 3 (or 4) should indicate that the background-image: url(images/globe_highlight.png) is to be added 
to the #main a.external:hover style.


(238) 4. instructions;
my download didn't contain an "images/globe_highlight.png" file.


[238] step 3 and step 4;
Step 3 has two styles applied: background-color and color. The second paragraph of step 3. says that 
there is a problem, that the background color from #mainn a:hover style also appears. NO IT DOESN'T!

It will appear if you type in the extra style that mysteriously appears in step 4: the background-image 
style. If you don't add this (you are never told to add it actually), you won't need to add the 
background-color: #FFF style in step 4.


(239) Top half of page. "Marking Visited Pages";

I've tried opening the COMPLETED version of the tutorial (bathtub_finished.html) in both IE7 and 
Firefox2.0

I get different results for each.

The check-mark image and greyed out text works fine in IE but
I don't see any changed results in FF.


{241} first line;
as the text states "Below the body style in the internal style sheet, add a new style", but there is no 
"body" style in the internal style sheet, originally or created through previous steps following the 
tutorial.


[242] step 9;
This time, step 9 says to remove the top border and adjust the padding. However, the change in style 
removes the bottom border with a "border-bottom: none;" style. Also, the border color number is 
mysteriously changed from #999 to #999999, which is the same thing of course, but didn't need to be 
changed from step 8.

Also, step 10, adds a top border to ul#mainNav style with "border-bottom: 1px dashed #999" which I don't 
think is correct either.


{243} Paragraph numbered "10";
Says "Add a top border" but should this be "bottom border"?


{258} 3rd line of 1st paragraph;
Says "rows in a column" but should this be "cells" in a column?


(263) example code at the bottom of the page;
"margin-right; 15px;" must be "margin-right: 15px;".


(263) item 3, bottom of page;
Well I'm sure this is a typo:

In the .label style, it shows a semi-colon after "margin-right", but it should be a colon.


{267} step 10. bottom of page adding the background image.;
Step 10 has you add the background: url(images/td_bg.png) no-repeat left top; to your internal style 
sheet to eventually make the stripped back ground for the table, so your table will look like the one in 
figure 10-9 on page 264.After adding the code and adding the class="alt" code to the tr tags the table 
all looks white yet. Upon opening the td_bg.png image located in the images folder, the graphic file is 
just a white strip. Even the completed tutorial has an all white table with its graphic also a white 
strip. You can either change the back ground color of the whole table if you already added the graphic to 
the table to create the stripped look yet or instead of using the image use background-color tag and 
slect a color for every other row. 


{272} 12;
IE does not recognise the form fields formatting. Only visible in Gecko


(285) Second paragraph of main text; second sentence.;
It says "If the total width of all the columns is less than the space available (...) then the last 
column drops down..."

It should say the opposite: "If the total width of all the columns is _greater_ than the space 
available...". 


{286} 4 p, 5 line;
Book says to float main content right and the left sidebar right within that <div>, when the left sidebar 
should be floated left as indicated in Figure 11-6


{304} code snippet at bottom of page, just before last sentence;
the code example reads:

* html #mainColumn { height; 1px;}

...but that first semicolon should be a colon. Thus it should read:

* html #mainColumn { height: 1px;}

Very minor, but there it is..


(358) paragraph 1;
The text is:
"1. Create a style for the <div> tag that encloses the main content of the page (#3 in Figure 
12-17). ..."

This should be (#4 in Figure 1-17).


(359) Bottom Graphic;
On page 356, you instruct readers to include a picture of a tomato in a bathtub (tomato_bath.jpg). When 
one continues through the tutorial, however, and see what "it should look like in Figure 9-32", the 
reader is presented with a screenshot that excludes the tomato_bath.jpg file.


(360) Paragraph 3 of section 7.;
Final sentence reads:

"To make the left sidebar line up and fly right (#4 in figure 12-17), ..."

The left sidebar is #6 in the figure.


(366) first paragraph;
Create a new advanced style named #banner img, ... should be #header img. It is correct in the Chapter_9 
finished version.


{381} 2;
in print preview text is narrow column floated right and not as shown in illustration 13-5


{393} very bottom (the "NOTE:");
(Not a mistake, since links change all the time), but the link to Tanek Celic is no longer valid (error 
404'd). However, I was able to find it on tanek.com @ http://tantek.com/log/2004/09.html#d06t2354
as of 11/25/2007 


[411]2nd paragraph;
According to the CSS spec, letter-spacing cannot be specified in any valid CSS measurement unit. Percentages are not allowed.

http://www.w3.org/TR/CSS2/text.html#propdef-letter-spacing


(447) Step 11;
Should read "Repeat Step 9" instead of "Repeat Step 11"


(708) Paragraph numbered 14;
You say to "link this text to water_fun.html". That file does not exist. It should say "link this text to 
farming_fun.html".


(763) First Sentence;
Your text says "To bein, move the cosmo_store folder...."
The folder name is actually cosmo_shop.
Not a big deal, but not correct.


{766} Text within item 7;
You describe the path to the cosmo_shop testing site as:
C:\Program Files\xampp\cosmo_shop.

That didn't work, and I spent time trying to figure out why.

The correct path is:

C:\Program Files\xampp\htdocs\cosmo_shop