OK I have created a solution, it involves using another table which I tend to avoid usually but as the rest of UBBthreads is table based another one is not going to make any difference really.
So first decide on the minimum width a thumbnail will be, so in my case portrait thumbnails have a width of 93px, make an image slice with an extra 5px either side (so 103px) as below...
Then create the table code with padding/border css on the image for the other parts of the shadowing...
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<div>
<img src="/thumbnail.jpg" alt="Image" style="border-right:2px solid #e6e6e6; border-left:2px solid #e6e6e6;padding:3px;"/>
</div>
</td>
</tr>
<tr>
<td>
<img src="thumb-shadow.gif" alt="Shadowing" width="100%" height="3" />
</td>
</tr>
</table>
As the div wrapping the image is a block element, this forces the table width to the width of the image (plus the css padding/borders). The shadow image in the second table row is set to a width of 100%, so extends to the width of the table element. If you place an image with a larger width in the div the shadow image extends in width as desired.
Not the most graceful code but it works,
see it in action here.
Previous Topic
Index