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

1. Page 4, step 3 - FAQ:

   Not errata, but a common question has been asked. "Where's the concepts.html file? Did you leave it out?" Actually, no. It is the one you created yourself. If you missed the instruction on page 4, step 3, and gave it another name, this is the file we're referring to.

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

3. Page 33, step 7:

   This step follows the task of creating the #mainContent div. In it, you're essentially creating a #sidebar1 division. The second part of the step reads to select everything ..."from the opening of the first h1 to the closing tag of the..." Instead, it should read, ..."from the opening of the h3 to the closing tag of the..."

Chapter 2

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

2. Page 97, code block for IE 5 IECC:

   Apparently, somewhere along the way, we wiped out the colon of the property/value pair for #mainContent.

   #mainContent { width 458px; }

   Should become:

   #mainContent { width: 458px; }

   The current file download for the completed project in Project 2 has been updated and reuploaded.

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

1. Page 259, Step 2:

   The step reads: "Set the font-face to 'Lucida Grande'..." It should read: "Set the font-family to 'Lucida Grande'..."

2. Page 259, step 7:

   The step says to set "the color to #D9DEE8." It should read to set "the background to #D9DEE8."

3. Page 260, step 9:

   The word "immediat ely" should not have a space in the middle (immediately). Apologies to those whose first language is not English.

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.

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

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

   <!--[if lte IE 7]>
   <link href="/css/ie.css" rel="stylesheet" type="text/css" media="screen" />
   <![endif]-->
   
   <!--[if lte IE 6]>
   <link href="/css/ie6_less.css" rel="stylesheet" type="text/css" media="screen" />
   <![endif]-->

   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.

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

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