The Sliced Image

layout hacks 1999 still works

One picture cut into a grid of pieces, glued back together with a zero-gap table.

In 2026: Still works, pixel perfect: the first photo below is four separate images in a table, joined with no visible seam. Designers sliced layouts this way for rollover regions, faster perceived loading and round corner tricks; ImageReady and Fireworks had Export as HTML buttons that wrote exactly this. One scar shows its age: these tables were born in quirks mode, and standards mode adds a descender gap under every image, so hiding the seams now needs img display block, the one line that saved a thousand sliced sites. The second table changes one attribute and the picture shatters, which is the maintenance story of every sliced site.

Where it came from: Adobe ImageReady, bundled with Photoshop from 1999, and Macromedia Fireworks both exported sliced tables automatically. The descender gap arrived with standards mode doctypes and broke them all a few years later.
Wikipedia ↗Wayback: killersites ↗

<!-- img { display: block } is the standards-mode fix. Without it every
     slice sits on a text baseline and thin gaps open under each row. -->
<style>.seam img { display: block }</style>

<table class="seam" cellpadding="0" cellspacing="0" border="0">
<tr><td><img src="https://xbawx.com/inc/img/demo/photo_sl0.jpg" width="200" height="150" alt=""></td>
    <td><img src="https://xbawx.com/inc/img/demo/photo_sl1.jpg" width="200" height="150" alt=""></td></tr>
<tr><td><img src="https://xbawx.com/inc/img/demo/photo_sl2.jpg" width="200" height="150" alt=""></td>
    <td><img src="https://xbawx.com/inc/img/demo/photo_sl3.jpg" width="200" height="150" alt=""></td></tr>
</table>

<p style="font:13px Verdana">The same four slices with cellspacing="6":</p>

<table cellpadding="0" cellspacing="6" border="0" bgcolor="#000000">
<tr><td><img src="https://xbawx.com/inc/img/demo/photo_sl0.jpg" width="200" height="150" alt=""></td>
    <td><img src="https://xbawx.com/inc/img/demo/photo_sl1.jpg" width="200" height="150" alt=""></td></tr>
<tr><td><img src="https://xbawx.com/inc/img/demo/photo_sl2.jpg" width="200" height="150" alt=""></td>
    <td><img src="https://xbawx.com/inc/img/demo/photo_sl3.jpg" width="200" height="150" alt=""></td></tr>
</table>

sandboxed demo · breaks nothing but itselfrestart

More in layout hacks