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.

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

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

Get Web Site Cookbook now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial