Errata for Mastering CSS with Dreamweaver CS3

Sadly, we're not perfect. Creepy crawlers slip through, technology changes or we think of a different way to do things. We've created this page to keep you up to date with our thoughts and changes. If you've found something awry, please use the contact form to send us the information and we'll share it with other readers here. Be gentle, we're human.

Chapter 1

Not errata, but a common question: Page 4, step 3 tells you to save your document as concepts.html. Later, you're told to open concepts.html. This file is not in the download for the chapter. It is the one you created yourself. If you gave it another name, this is what we're referring to.
Page 27, step 2:
The step reads to "place your cursor in front of the first paragraph of dummy text in the mainContent div, which begins with Lorem Ipsum". However, there are no divs in the page at this point. It should read to "place your cursor in front of the first paragraph of dummy text below the Main Content heading, which begins with Lorem Ipsum".

Chapter 2

Page 82, step 3:
The step reads to put 15px padding on the right and 5px on the left, but the code (in shorthand) reads so that there is 5px on the right and 15px on the left. This isn't a big deal since it's an arbitrary amount, but it could be confusing to some (and in fact, we think the pod looks looks best with the 15px on the left).

Chapter 3

This chapter deals with a transformation from messy, nested tables, to a CSS layout. Later chapters get into forms and such, not this one. Be aware that there are form validation errors we didn't have time to get into here. Also, be sure to add alt attributes to your images. If it's an image that merely serves a visual purpose, use an empty alt (alt="") so that screenreaders won't read them out loud.

Chapter 4

No known Errata.

Chapter 5

No known Errata.

Chapter 6

We built a real site, since completing the book, based on this chapter. There are a few things we'd like to mention.

Spry is a new technology. We didn't notice that clicking the scroller the first time doesn't activate it. The second click does. We've found a fix for the stutter issue. The answer was in another of Spry's example files and we got the Spry team to point it out to us. Greg blogged the fix to the Spry stutter on his blog. You can read about it there.
There is a pixel or two more space at the top of each vertical menu item in Internet Explorer (shocking, we know!). In IE7, it's 2px and in IE6, it's 1px. We finally solved this for our site by creating a new IECC. The existing IECC was originally set to be shown to all versions of IE - [if IE]. With the announce of IE8 looming on the horizon (in fact, it was announced since we finished the book), we think it wiser to set our IECC's to be shown to IE7 and lower, thus leaving IE8 out of the mix for now. We placed the following in our code:





To explain the above, we took the original IECC and linked it to "lte IE 7" - if you remember from chapter 1, that's "less than or equal to Internet Explorer 7." Within that one, we added to the selectors already created, the fix for IE7:

ul.MenuBarVertical a {
  margin-top: -2px;
}

Then, we created a new IECC (called ie6_less.css) and linked that with the "lte IE 6" syntax. This one simply contains the fixes for IE6 and below. Those fixes are the 1px change for the menu as well as our decision to give those browsers a solid menu separator line instead of the ugly dashed one that IE does in place of a dotted line. The code looks like this:

ul.MenuBarVertical a {
  margin-top: -1px;
}
ul.MenuBarVertical li {
  border-bottom: solid 1px #666;
}
ul.MenuBarVertical {
  border-top: solid 1px #666;
}

That's all for the IECC's.
Since our gallery is built using ColdFusion, we made sure to put dynamic alt attributes into the large pictures within the Spry gallery. You should too.
In keeping with the accessibilty of em units, we changed our sliding scroller's dimensions to be defined in em units instead of pixels. This allows the text size to be increased while each scroller panel and the scroller size itself increases to accomodate it. If your using this in the real world, your actual sizing may vary, so we'll let you do the math. Remember, the formula is:

X(px) ÷ 16 = Y(em)

So if you want to change a 26px value to em units, you'd do this:

26px ÷ 16 = 1.625em

These pixel values are found in the following classes: .thumbnail, #slidingGallery, #slidingGallery .SlidingPanelsContent, and #slidingGallery .galleryItem. Do the math, change them to em, and they'll be ever so much more friendly to your users.