Stephanie Sullivan

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 15, second code block:

    The text/code block reads: ".thrColFixLtHdr #mainContent" and should read, ".thrColFixHdr #mainContent".

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

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

  1. Page 167, 1st paragraph, 1st sentence:

    The text reads, "runs the full length of the page" and should read, "runs the full width of the page" instead.

  2. Page 171, 4th paragraph and code block:

    The instructions and code block show a clearing method, using the same one in the CSS layouts(<br class="clearfloat" />). However, in this case, we'll be applying that class to a <div> element to create the clearing. This is shown in the final files, but not explained in the chapter (it's due to the fact that Internet Explorer needs a div over the break in this particular case). So the break should be changed to a div in the code block in the #header like so:
    <div class="clearfloat"></div>

  3. Page 194, bottom code block:

    The first rule in that code block reads: "p, #mainContent, #mainContent ol {" Somewhere along the way, the ul, as listed in the paragraph above the code, got wiped out. It should read: "p, #mainContent ul, #mainContent ol {". (The final code included with the chapter download is correct.)

Chapter 5

  1. Page 244, Step 13:

    The step reads: "In the Edit Tag dialog box that appears"... It should read: "Create a new paragraph and inside it, insert a button from the Form section of the Insert panel. This time, in the Edit Tag dialog box that appears". (Apparently a "Word wipeout" occurred somewhere along the way!)

  2. Page 251, step 12:

    The step says to "Create a Spry Validation Text Field for the Comment field..." It should read to "Create a Spry Validation Text Area for the Comment field..." (And Figure 5.35 also should show four files to be added - both TextField.css and .js as well as TextArea.css and .js.)

  3. Page 259, Step 2:

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

  4. Page 259, step 7:

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

  5. 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. Page 289, step 6:

    The step says that we'll be "adding the selected class..." It's actually the selected ID (#selected).

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

  3. 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 realized the IECC for the page didn't get added. We apologize. IE can be a real bear if you don't feed it IECCs regularly.

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

    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 it, we added to the selectors already created, the fix for the menu:

    ul.MenuBarVertical a { zoom: 1; }

    We also find the dotted border rendering in IE really unattractive. We decided to give IE 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 li {
    ��border-bottom: solid 1px #666;
    }
    ul.MenuBarVertical {
    ��border-top: solid 1px #666;
    }

    That's all for the IECC's.

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

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