Product Overview

HTML Utopia: Designing Without Tables Using CSS, 2^nd Edition

Corrections & Typos

Found a mistake that’s not listed here? You clever monkey! Contact us to let us know!

Got the 1st edition? See corrections to the 1st edition here.

April 2006

• p.147 summary

  The Chapter 7 summary mentions that "the chapter demonstrated the use of positioning to create shadowed text effects" when, in fact, it doesn't.

Confirmed typos in the June 2007 update to the 2nd edition:

• None known at this time.

Confirmed typos in the July 2006 update to the 2nd edition:

• p. 48 first code listing
  

  font-face should be font-family.

• p. 59 second code listing
  

  The ital class names should all read italic.

• p. 89 first paragraph
  

  The text incorrectly states that table cells inherit borders from their parent table. This is not true.

• p. 193 second paragraph
  

  maining.jpg should be mainimg.jpg

• p. 199 second code listing
  

  This code listing is incorrectly labeled as an excerpt of style.css, when it should be listed as an excerpt of index.html.

• p. 202 second code listing
  

  This code listing should not include the first color declaration, color: black;

• p. 214 first code listing
  

  margin: 0 240px 0 0; should be margin: 0 0 0 240px;

• p. 290 first code listing
  

  fixedwidth.css should be fixedwidth.html.

Confirmed typos in the June 2006 update to the 2nd edition:

• p.28 figure 2.7
  

  The size of the hyperlink text does not change. It should appear larger than the text in the paragraph, but not quite as large as the text in the heading. Also, the code listing is missing a font-size declaration. The style rule should appear as shown below:

  a:hover {
    background-color: blue;
    color: white;
    font-size: x-large;
  }

• p.90 figure 5.5
  

  The alternating row colors are not noticable when printed in black and white. The style rules for .odd and .even in table.html on page 88 should appear as follows to give a suitable effect when printed in black and white:

  .odd {
    background-color: lightgray;
  }
  .even {
    background-color: white;
  }

• p.166, last paragraph (runs on to p.167)
  

  This paragraph should be replaced with the following:

  Figure 8.12 demonstrates this principle. The first screenshot shows how the page from Figure 8.11 looks if set padding-right to 0, then narrow the browser window so that there is barely enough room for the text. The second screenshot shows the same page with padding-right set to 20px. Because the box now incorporates 20 pixels padding on the right hand side, the text can no longer run all the way to the right hand border of the gray box and the end of the sentence is forced onto the next line.

• p.190, 2nd paragraph
  

  The first sentence in this paragraph incorrectly states that we set the float property to 0. We set the margin property to 0, not the float property.

• p.249, 1st code listing
  

  The margin-top declaration in this rule causes a strange effect in IE and is not needed. It should be removed.

• p.260 figure 10.1
  

  The Event Schedule in the mockup is displayed in a serif font with the headings centre aligned. This should be shown in a sans-serif font, and the headings should be left-aligned.

• p.280 figure 10.13, p.281 figure 10.14, p.282 figure 10.15
  

  The rows in the table displayed in these screen shots should have every second row highlighted in an alternate colour to make it more readable.

• p.338, 383, 430, and 457
  

  The descriptions of the bottom, left, right, and top properties incorrectly state that an absolute-positioned element is placed relative to it's positioning context's content area. In fact, it's the padding area of this ancestor that is used, not its content area. So if an element is absolute-positioned to left: 0 and top: 0 inside an element with 10 pixels of padding, the positioned element will display 10 pixels above and 10 pixels to the left of the content inside the padded element.

• p.430 code listing
  

  This code listing should show the property richness, not pitch-range. The listing should appear as:

  .ominous {
    richness: 30;
  }

Confirmed typos in the April 2006 2nd edition:

• p.191 figure 8.27
  The right-aligned navigation bar suffers from the "peekaboo" bug in IE6 for Windows. The following text should be inserted immediately following this figure:

  If you’ve been working through this example in Internet Explorer 6, you may already have noticed that things aren’t going quite to plan. Sometimes, as if by magic, the navigation list that’s aligned to the right just seems to disappear, along with part of the light blue borders above and below the list. Then, if you switch to another window, the list magically reappears! Well, sometimes it does; other times, it stays hidden.

  If you’ve experienced this problem, welcome—you’ve stepped through the looking glass into the wonderful world of Internet Explorer CSS bugs. This one is called the peekaboo bug, as the content disappears and reappears in an almost completely random fashion.

  There are quite a few of these Internet Explorer CSS bugs, but the majority seem to revolve around a mysterious, nonstandard DOM property called hasLayout. The galaxy of hasLayout bugs is vast and difficult to understand, but thankfully, these bugs aren’t too tricky to squash. Usually, eradicating them is just a matter of adding one of a number of inconsequential declarations to the style rules of the element that's giving you trouble. For example, it can be as simple as adding a height declaration to #header-bottom, as shown here:

  #header-bottom {
    border-top: 1px solid #b9d2e3;
    border-bottom: 1px solid #b9d2e3;
    height: 1%;
  }

  This declaration is named the Holly Hack, after its inventor, Holly Bergevin.

  Add this declaration to your style sheet, and voila! Problem solved. The height declaration doesn’t really affect the display of the page in any browser, as the content of this div “overflows” its height, effectively correcting the height. Don’t worry if you don’t understand what’s going on here. All you need to know is that when you add such declarations either to the element that's giving you trouble, or its parent element, those declarations will often fix bizarre behavior in Internet Explorer 6.

• p.195 figure 8.29
  The feature area suffers from the "peekaboo" bug in IE6 for Windows. The following text should be inserted immediately following this figure:

  If you load this page in Internet Explorer 6, you’ll see that the peekaboo bug that affected our right-aligned navigation bar has reared its ugly head once more, and is randomly causing our feature area to display as a white rectangle. Again, it’s simple to fix this issue by adding the declaration height: 1% to our #mainfeature rule.

  #mainfeature {
    background-image: url(img/mainimg.jpg);
    background-repeat: no-repeat;
    background-color: #112236;
    color: white;
    padding: 2em 2em 1em 200px;
    height: 1%;
  }

  Reload the page and the main feature area will display as reliably in Internet Explorer as it does in Firefox, Opera, and Safari.