Why It s Not Bulletproof

Why It's Not Bulletproof

For many of the reasons found in the previous chapters' examples, these rounded boxes have certain problems. First, there exists a mound of presentational markup, due to the use of nested tables. We know now that this issue can be easily addressed by turning to CSS to handle the design of the boxes, while meaningful markup can be used to structure them.

Second, the box design is unable to accommodate a large text size or heading length over a certain number of characters. Figure 5.6 shows our example box with the text size increased a few notches.

Figure 5.6. With text size increased, the heading's background image is repeated, but the image was built for only one line of text.

You'll notice that while the box is able to grow vertically in the content area, the heading's background image was designed for a certain line length at a specific font size. If the line wraps, or if the user increases the text size, the design breaks down.

The image that sits behind the box's title is set as a background image on the <td> element. In the markup, this might have been achieved like so:

 <td background="/images/box_top.gif"> 

By default, a background image specified this way will tile within the cell, and in this case that tiling becomes visible when the text expands the table cell past the point of the original image height.

Again, this isn't a Web design crime, but it's certainly something worth addressing.