Hi i have this code for rounded corners tables:
HTML Code:
<style type='text/css'>
.box_lu {
 background:url("leftup.gif") no-repeat;
 vertical-align:top;
 font-size:1px;
 height:8px;
 width:8px;
}
.box_ru {
 background:url("rightup.gif") no-repeat;
 vertical-align:top;
 font-size:1px;
 height:8px;
 width:8px;
}
.box_u	{
 padding-bottom:7px;
 border-top: 1px solid #bdd6ee;
}
.box_l	{
 border-left: 1px solid #bdd6ee;
 width: 7px;
}
.box_r	{
 border-right: 1px solid #bdd6ee;
 width: 7px;
}
.box_ld {
 background:url("leftdown.gif") no-repeat;
 height:8px;
 width:8px;
}
.box_rd {
 background:url("rightdown.gif") no-repeat;
 height:8px;
 width:8px;
}
.box_d	{
 padding-top:7px;
 border-bottom: 1px solid #bdd6ee;
}
</style>
<table border='0' cellpadding='0' cellspacing='0' width='10' align='center' style='background-color: #ffffff;'>
			<tr>
				<td class='box_lu'>
                                <!-- this will fix
                                  <img src='' width='8' height='0' border='0'>
                                -->
                                </td>
 				<td valign='top'><div class='box_u'></div></td>
 				<td class='box_ru'></td>
			</tr>
			
			<tr>
				<td class='box_l'>&nbsp;</td>
				<td height='100%'>   </td>
				<td class='box_r'>&nbsp;</td>
			</tr>
			<tr>
				<td valign='top' class='box_ld'></td>
				<td valign='top'><div class='box_d'></div></td>
				<td valign='top' class='box_rd'></td>
			</tr>
		</table>
The problem is that if the content is a text that takes more than the width of the table (someting like 'A_long_text_without_spaces') the left and right margins are minimized more than the 8px width that i set. I found a fix by using the <img> tag.
Can you please give me a more elegant solution using CSS.