Errata

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?

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.

Use of the term "property" for a HTML tag is incorrect, and should be replaced by the term "attibute". HTML tags have attributes, CSS declarations have properties. Interchanging these causes beginners to get confused.

Current text:
(between the closing title tag and the opening body tag)

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

Text reads:

"mistyped the code from step 6"

It should read:

"mistyped the code from step 7"

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.

margin-left: 50px;
margin-left: 50px;

It should READ:

margin-left: 50px;

AND THEN:

margin-right: 50px;

The specificity of the selector "p.intro" is not 10 as stated here, but 11 (as exemplified by the example "p.byline" in the table on p87). Causes confusion and needs to be rectified !!

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.

The error is not in the book and this is probably not the place to raise this issue but:-

The layout.css file under the Chapter_06_ finished folder includes:
padding-left: 10px; within the #mainNav selector.

this style is not included in the layout.css file under the Chapter_06 folder.

No big deal in itself but when comparing the finished tutorial file with the published finished file in a browser the navigation items are not identically "centred" resulting in double/treble checking as to why the screens do not look the same.

Really enjoying the tutorials - many thanks

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_06layout.css

Not fair!

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.

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.

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.

"The page contains nine photos and photo captions."

There are only six of each.

Says "Locate the .sidebar h3 style in the external style sheet".
I think it should be "internal style sheet".

Text shows an example of a link that will be styled as a button:
<a link="stale.html" class="button">...
"link", however, is not an attribute available for the a (anchor) tag. One must use "href". Ergo, the anchor mark-up s/b:
<a href="stale.html" class="button">...

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.

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.

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.

The style shown in #4 has TWO changes from what was shown in #3. In addition to adding a background-color, as discussed in the text just above #4, the style now also shows a background-image property.

This background-image property should not be added into the rule for #main a.external:hover. Two reasons:
1) Setting a new background-image for a :hover pseudo-class would defeat the whole purpose of the Pixy method being discussed on the page.
2) the image "globe_hightlight.png" simply doesn't exist.

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.

Says "Add a top border" but should this be "bottom border"?

Says "rows in a column" but should this be "cells" in a column?

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.

IE does not recognise the form fields formatting. Only visible in Gecko

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

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

in print preview text is narrow column floated right and not as shown in illustration 13-5

The page does not print as shown in the example because the warning class applied to the h2 tags has a margin-left of 30px to leave space for the warning image (which is now not printed).

.warning {
margin-left: 0;
}

needs to be added to print.css

(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