Here's a quick bit of HTML that codes for speech bubbles. This was developed for a series of dialogues on the University of Bristol's Biz/ed pages.

The nice thing about these bubbles is that as far as I can tell, they are bullet-proof. I have tested this code in IE and Netscape, Lynx, WebTV, on Macs and PCs, and I can't break it. In recent versions of IE it even improves on the code by scaling the bubbles depending on how much text there is in them. The only requirement is that the browser must support images as backgrounds in tables (or discard all images, as Lynx does).

The secret is to allow the browser to do most of the work for you. This is one of those "Zen of HTML" things that's well worth remembering whenever you write a web page: the browser knows more about your user's machine than you do. Let it do the hard work.

Okay, what is all this about? Well, here is an example of the speech bubble code in action:

	So, this is a speech bubble, is it? I'm supposed to be impressed?
			Heh. Try resizing your window, smartypants. See? This code is bulletproof. And this style of dialogue is good for all sorts of discussions, arguments and FAQs.

Obviously, for your colour scheme, you will need to create or re-colour the images that make up the bubbles. I've left the original white ones with transparent background in place for this.

How is it done? Take a look at this version, which is exactly the same code, only with the borders of table cells and images turned on, and the table background lit up in a different colour:

	So, this is a speech bubble, is it? I'm supposed to be impressed?
			Heh. Try resizing your window, smartypants. See? This code is bulletproof. And this style of dialogue is good for all sorts of discussions, arguments and FAQs.

Basically we have four elements.

1. Text - this determines the size of the speech bubbles.
2. Fixed image pieces - the corners, for example. These are image tags set into the table cells.
3. Resizing images - these are loaded as table background images and tile to produce a scaling image either horizontally or vertically.
4. Floating images - the clever bit. The two speech darts are images set inside the bottom cells, but set to be centred in the cells. The text causes the cells to find a certain width, and regardless of that width, the darts are centred.

Here's the source code. You will have to adjust image paths to suit your setup. You can also download a ZIP file containing all the source code and images.

<table cellspacing="0" cellpadding="0" border="0">
<tr>
    <td><img src="topleft.gif" border="0" alt=""></td>
    <td background="centretop.gif"> </td>
    <td><img src="toprightleft.gif" border="0" alt=""></td>
    <td> </td>
    <td> </td>
</tr>
<tr>
    <td background="sideleft.gif" rowspan="2"> </td>
    <td  valign="middle" rowspan="2">
    Text in first speech bubble
	</td>
    <td valign="top"><img src="overlap.gif" border="0" alt=""></td>
    <td background="centreright.gif"> </td>
    <td valign="top"><img src="toprightright.gif" border="0" alt=""></td>
</tr>
<tr>
    <td background="centrecentre.gif"> </td>
    <td valign="middle">
    Text in second speech bubble
	</td>
    <td background="sideright.gif"> </td>
</tr>
<tr>
    <td valign="top"><img src="bottomleft.gif" border="0" alt=""></td>
    <td valign="top" background="centrebottomleft.gif" align="center">
	<img src="leftbubble.gif" border="0" alt=""></td>
    <td valign="top"><img src="centrebottom.gif" border="0" alt=""></td>
    <td valign="top" background="centrebottomright.gif" align="center">
	<img src="rightbubble.gif" alt=""></td>
    <td valign="top"><img src="bottomright.gif" border="0" alt=""></td>
</tr>
</table>