navigation bar end caps

[brodel34]

I am really new to this, so please bear with me. I am editing an existing 3dCart website and am having an issue with the navigation bar.The bar background image is spanning 100% so my end caps are not showing up properly with transparency. I am cheating by making, what should be transparent on the end caps, the same color as the page background, but it's not right and you can see it.What I would like to know is how do I place the end caps on the ends instead of 'on top' of the bar, so to speak.\[code\]<td><table width="100%" border="0" cellpadding="0" cellspacing="0" style="background: url(assets/templates/[template]/images/menu-bg.gif) repeat-x; color: #000; text-align: right"> <tr> <td width="13"><img src="http://stackoverflow.com/questions/12820762/assets/templates/[template]/images/menu-l.png" width="13" height="48"></td>\[/code\]The end cap (menu-l) is a png file with transparency but it is not working. I was using a jpg with the transparent parts set as the home page background color, but it's a gradient and doesn't look right.If someone can tell me how to place these caps on the ends, I would greatly appreciate it.Thank you