O'Reilly logo

Web Site Cookbook by Doug Addison

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required