Speech Bubbles

<style type="text/css">
#container {background:#ccc; padding:50px; width:400px; margin:20px auto 100px auto;}
#container div:after {content: "."; display: block; height:11px; clear:both; visibility:hidden;}
#container div {width:400px; height:auto; font-family:verdana; font-size:11px;}
b.tl {display:block; width:400px; height:8px; font-size:1px;}
b.tr {display:block; width:392px; height:8px; font-size:1px; float:right;}
b.bl {display:block; width:8px; height:8px; font-size:1px; float:left;}
b.br {display:block; width:392px; height:8px; font-size:1px; float:right; position:relative;}
b.point {display:block; font-size:1px; width:25px; height:14px;}
#container div p {padding:8px; margin:0; border:3px solid #fff; border-width:0 3px; text-align:justify;}

div.one b.tl {background:url(tab/top_left1.gif) top left no-repeat;}
div.one b.tr {background:url(tab/top_right1.gif) top right no-repeat;}
div.one p {background:#ecc7c7;}
div.one b.bl {background:url(tab/bottom_left1.gif) top left no-repeat;}
div.one b.br {background:url(tab/bottom_right1.gif) top right no-repeat;}
div.one b.point {background:url(tab/point1.gif) top left no-repeat; margin:5px 0 0 25px;}

div.two b.tl {background:url(tab/top_left2.gif) top left no-repeat;}
div.two b.tr {background:url(tab/top_right2.gif) top right no-repeat;}
div.two p {background:#e5ecc9;}
div.two b.bl {background:url(tab/bottom_left2.gif) top left no-repeat;}
div.two b.br {background:url(tab/bottom_right2.gif) top right no-repeat;}
div.two b.point {background:url(tab/point2.gif) top left no-repeat; margin:5px 0 0 125px;}

div.three b.tl {background:url(tab/top_left3.gif) top left no-repeat;}
div.three b.tr {background:url(tab/top_right3.gif) top right no-repeat;}
div.three p {background:#c9d7ec;}
div.three b.bl {background:url(tab/bottom_left3.gif) top left no-repeat;}
div.three b.br {background:url(tab/bottom_right3.gif) top right no-repeat;}
div.three b.point {background:url(tab/point3.gif) top left no-repeat; margin:5px 0 0 225px;}

div.four b.tl {background:url(tab/top_left4.gif) top left no-repeat;}
div.four b.tr {background:url(tab/top_right4.gif) top right no-repeat;}
div.four p {background:#e5c9ec;}
div.four b.bl {background:url(tab/bottom_left4.gif) top left no-repeat;}
div.four b.br {background:url(tab/bottom_right4.gif) top right no-repeat;}
div.four b.point {background:url(tab/point4.gif) top left no-repeat; margin:5px 0 0 325px;}

p.italic {margin:0 0 20px 0; font-weight:bold; font-style:italic;}

ul.list li {font-size:11px; margin:2px 0;}
</style>

<div id="info">

<div id="container">
<div class="one">
<b class="tl"><b class="tr"></b></b>
<p>A simple CSS only method of adding a little style to your comments. This uses 5 images per 'bubble' which can be easily customized to have any background color.</p>
<b class="bl"></b><b class="br"><b class="point"></b></b>

</div>
<p class="italic">Speech bubble with left pointer</p>
<div class="two">
<b class="tl"><b class="tr"></b></b>
<p>A little extra markup is required but I think that this is a small price to pay to not using javascript.</p>
<b class="bl"></b><b class="br"><b class="point"></b></b>
</div>
<p class="italic">Speech bubble with mid-left pointer</p>

<div class="three">
<b class="tl"><b class="tr"></b></b>
<p>This method is lightweight in style and will work with javascript turned off.</p>
<b class="bl"></b><b class="br"><b class="point"></b></b>
</div>
<p class="italic">Speech bubble with mid-right pointer</p>
<div class="four">
<b class="tl"><b class="tr"></b></b>

<p>The positioning of the pointer can easily be adjusted by changing one value in the stylesheet.</p>
<b class="bl"></b><b class="br"><b class="point"></b></b>
</div>
<p class="italic">Speech bubble with right pointer</p>
</div>

</div> <!-- end info -->