CSS: The Missing Manual
by David Sawyer McFarland

The unconfirmed error reports are from readers.  They have not yet been 
approved or disproved by the author or editor and represent solely the
opinion of the reader.

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

This page was updated April 11, 2008.


UNCONFIRMED  errors and comments from readers: 

{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.

(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?

{38} Step 9 of tutorial;
I don't know if information is really missing, but step 9 of the tutorial for the Chapter 2 seems incomplete. It just says to "add rules to format [more paragraph types]", but it doesn't provide instructions.

{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)

{52} Figure 3-5;
This figure shows a bulleted list in which the a tags have supposedly been styled in Arial (as per code on the previous page), but in the image they are displayed in a serif font.

{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.

[95] Figure 5-6;
#sidebar p
should say
#note p

(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.

{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!

(135) figure 7-2;
7-2 states that:

"Each photo on this page has a 10-pixel margin, so the gap seperating two photos is 20 pixels."

However, on page 137, the Colliding Margins paragraph says:

"Instead of adding the two margins together, a web browser applies the larger of the two margins."


As a newcomer to CSS this is confusing as the statements appear to contradict each other.

{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. 

{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.

{198} item 6.;
background-position: center top; should be
background-position: left top;

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

{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.


{236} Items 2 and 3;
These changes don't appear to have any effect in IE7. That is, the text overlaps with the envelope icon in an unfortunate way even when the padding-left is in place.


[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.

[242]
Paragraph 9.
"Remove the top border"
should say
"Remove the bottom border"

[243]
First paragraph:
"and then apply it to just that first link"
should say
"and then apply it to just that last link"

"there's no space separating the top of"
should say
"there's no space separating the bottom of"

"from the top of that first link"
should say
"from the bottom of that last link"

"10. Add a top border to the"
should say
"10. Add a bottom border to the"

[245]
Paragraph 6's CSS code:
"body#expert a#experLink"
should say
"body#expert a#expertLink"

{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).

[358]
Paragraph 1
"main contents of the page (#3 in Figure"
should say
"main contents of the page (#4 in Figure"

(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 

[397]
bottom of page
"#news a#newLink,"
should say
"#news a#newsLink,"

[424]
min-height section
"the box's height shrinks to meet the"
should say
"the box's height expands to meet the"

[425]
right section
"Example: left: 5em;"
should say
"Example: right: 5em;"