Recipe 5.3. Slicing and Recombining Complex Images

Problem

You need to align several images in a complex table to appear as one seamless image.

Solution

If you are creating new web pages or have upgraded older web pages to use a strict DOCTYPE (described in Recipe 4.1), then you may find that your tried-and-true method for slicing and recombining images in a table does not end up looking the way it once did. Images that are supposed to butt up against one another have an annoying space beneath them, as seen in Figure 5-6.

Figure 5-6. Small spaces will appear under image slices reassembled in a table when a browser renders the page using a strict DOCTYPE definition

To fix the problem, add a CSS rule to your page or master stylesheet that changes how the browser renders images in a table cell on a web page using a strict DOCTYPE:

 td img {    display:block; }

Or use an older or transitional DOCTYPE declaration tag (or no DOCTYPE at all) to prevent the problem. The DTD tag appears in the web page code above the <html> tag, like this:

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"         "http://www.w3.org/TR/html4/loose.dtd">

Discussion

Slicing up a large image into several small images, and then rejoining those parts in a table, has several advantages. Working with small pieces of what would otherwise be a monolithic download, web designers can apply different optimization schemes, rollover effects, and <alt> attributes to the individual images that together speed download time and improve usability for web graphics such as page headers.

Site builders have long relied on the browser behavior that shrinks table cells up against the edges of images inside the cell. But newer DTDsbeginning with HTML 4.01treat images in table cells differently than did older DTDs, such as HTML 3.2. Images in web pages using strict DTDs are rendered as inline content, like text.

A line of text sits on an imaginary line called a baseline. The letterforms of a typeface appear mostly above the baseline, but some space is reserved below the baseline for letters that have descenders, such as "p" and "j." When rendered as inline content, imageseven in table cells with no adjacent textare placed on the baseline and given the same breathing room above and below that a line of text would get (allowing for descenders, even though an image will never have one). The actual amount of space varies depending on the typeface, but even a GIF 1 pixel tall and 10 pixels wide gets both ascender and descender space (see Figures 5-7 and 5-8).

Figure 5-7. Even a short 1x10 pixel graphic gets space above and below in a table cell

Figure 5-8. Text next to the 1x10 pixel graphic in a table cell shows where the extra space comes from

Without the stylesheet fix offered in the Solution, multi-slice web page graphics that are supposed to appear as one contiguous image instead look like they've been dropped and hastily glued back together (see Figure 5-9).

Figure 5-9. Who broke the web page header? Images displayed by default as inline content get a little space below in a table cell

Applying a blanket CSS rule to all images in table cells will fix the rendering problem in Figure 5-9, but may have unforeseen consequences for other images that you want to be aligned on a baseline with real adjacent text in a table cell. If that's the case for you, then apply a unique class name, such as headergraphic, to the images that you want to display without extra space and then modify the stylesheet entry like this:

 td img.headergraphic {    display:block; }

Netscape Navigator image display quirks

Finally, a note about Netscape Navigator 4.x. The rendering quirks of modern browsers presented with images in table cells probably seems familiar to any web designer who has ever torn his hair out trying to figure out why Netscape's once-popular browser put the same mysterious spaces between images. The DOCTYPE was not the culprit in this case. Turns out that Netscape puts visible whitespace in the rendered web page wherever whitespace characterstabs, returns, and spaces occur in the actual source code for the page.

A table full of cells formatted like this will results in a jagged image:

 <td>  <img src="/books/2/2/1/html/2/images/sunset_01.jpg" width="71" height="50" alt=""> </td>

Closing up the code for the cell fixes the problem:

 <td><img src="/books/2/2/1/html/2/images/sunset_01.jpg" width="71" height="50" alt=""></td>

If your server logs indicate significant Netscape Navigator 4.x users, be sure to test with this browser.