Basically, what I need is a table row/cell to make up a heading using images.

I have 4 images per heading. One for the background, that can be repeated. One for the left edge that should sit OVER the background image. One for the title itself that should also be positioned over the background. And one for the right edge. The whole thing should have 100% width.

This:
Code:
td align=top height=23 width="100%" style="background-image: url(xxxxxxxx);">
<img src="xxxxx" style="left: 0px; top: 0px;" />
<img src="xxxxx" style="top: 5px; left: 29px;"/>
<img src="xxxxx" style="right: 0px; top: 0px; "/>
</td>
Does not work. The background appears, but the whole cell has a 1 px border around it, plus it is too tall. The images are all exactly 23 px tall but the cell renders at 27px tall. The background image appears to be UNDER the border, so that the bottom of it is 1 px above the bottom of the other two images.

Plus, my 4th image is not right-aligned. I suspect this is due to my rather large lack of knowledge of CSS. It's a little hard to describe as I am unable to post a picture of it.

Any ideas on how to fix?