CSS Container help

[ggggus]

Thinking about moving away from so many tables with my design, but I need help developing a container with image boarders.

Here's the code:
<table cellspacing="0" cellpadding=0>
<tr>
<td width="6" height="6" style="background-image:url(/images/BG_main_box_top_left.gif)"><img src="/images/spacer.gif" width="6" height="6" alt=""></td>
<td width="350" height="6" style="background-image:url(/images/BG_main_box_top.gif)"><img src="/images/spacer.gif" width="350" height="6" alt=""></td>
<td width="6" height="6" style="background-image:url(/images/BG_main_box_top_right.gif)"><img src="/images/spacer.gif" width="6" height="6" alt=""></td>
</tr>
<tr>
<td style="background-image:url(/images/BG_main_box_left.gif)" width="6"><img src="/images/spacer.gif" width="6" height="1" alt=""></td>
<td width="350" bgcolor="#FAFBFD" valign="top">
<div style="position:relative; top:-6px; left:-6px;">
<table cellspacing="0" cellpadding="0" border="0">
<tr>
<td width="295" height="18" style="background-image:url(/images/Box_Header.gif)">
<h1 class="mainbox">Output assembly</h1>
</td>
<TD width="5" height="18" style="background-image:url(/images/Box_Header_End.gif)"><img src="/images/spacer.gif" width="5" height="18" alt=""></TD>
</tr>
</table>
</div>
<TABLE border="0" cellspacing="0" cellpadding="0">
<TR>
<TD valign="middle">
<p align="center"><a href="javascript:newWindow('

http://www.fitnessrepairparts.com/p...ectories=no,resizable=yes,menubar=no');"><img

alt="Output assembly image" border="0" src="/product_images/21000016_s.jpg"></a></p>
</TD>
<TD valign="top">
<FORM method="post">
<INPUT type="hidden" name="action" value="Add Item">
<INPUT type="hidden" name="product_id" value="21000016">
<INPUT type="hidden" name="refferer" value="

http://www.fitnessrepairparts.com/index.php">

<INPUT type="hidden" name="diagram_id" value="">
<h5><font color="red">$283.73 / each</font></h5>
<p>each - Regularly $436.50</p>
<table border="0" cellspacing="2">
<TR>
<TD colspan="2">
<p><B>Catalog Number:</B> 21000016</p>
</TD>
</TR>
<tr>
<td>
<INPUT type="text" size="3" maxlength="5" name="qty" value="1" class="form_input">
</td>
<TD>
<INPUT type="image" src="/images/form_submit_add_to_cart.gif" alt="Add Item To Card">
</TD>
</tr>
</table>
</FORM>
</TD>
</TR>
<TR>
<TD colspan="2">
<p>Output shaft assembly for Quinton Clubtrack 3.0, Q50, Q55 and Q65 treadmill.</p>
<TABLE border="0" align="left" width="100%">
<TR>
<TD colspan="3">
<p>Volume Discounts:</p>
</TD>
</TR>
<TR>
<TD>
<p>Level 1</p>
</TD>
<TD>
<p>Level 2</p>
</TD>
<TD>
<p>Level 3</p>
</TD>
</TR>
<TR>
<TD>
<p>$427.50</p>
</TD>
<TD>
<p>$418.50</p>
</TD>
<TD>
<p>$405.00</p>
</TD>
</TR>
<TR>
<TD colspan="3">
<p>Save Up to $45.00 off MSRP of $450.00.</p>
</TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
</td>
<td width="6" style="background-image:url(/images/BG_main_box_right.gif)"><img src="/images/spacer.gif" width="6" height="1" alt=""></td>
</tr>
<tr>
<td width="6" height="6" style="background-image:url(/images/BG_main_box_bottom_left.gif)"><img src="/images/spacer.gif" width="6" height="6" alt=""></td>
<td width="350" height="6" style="background-image:url(/images/BG_main_box_bottom.gif)"><img src="/images/spacer.gif" width="350" height="6" alt=""></td>
<td width="6" height="6" style="background-image:url(/images/BG_main_box_bottom_right.gif)"><img src="/images/spacer.gif" width="6" height="6" alt=""></td>
</tr>
</table>

Examples are at

http://www.fitnessrepairparts.com

As you can see from the website, we use this complex bordered table everywhere. I set up a php function, and it's 2 lines to code in php to create another table for content, but it's obviously heavy on the HTML.

Can the identical thing be created using css? and is not as heavy on the bandwidth? I has to be adjustable vertically and horizontally without making the bordeers smaller or larger (meaning a one size fits all background image that is stretched and squished is not sufficient).

***************************************
J. Jacobs

http://www.piercedmedia.com

 

[Vragabond]

How about something like this?

http://www.alistapart.com/articles/customcorners/

 

[ggggus]

That get's me most of the way there, but not completely. As he notes at the end of the article, the corners cannot be transparent... he mensions a possible part II to the article, but I couldn't find part II.

Right now if the box is on top of a different color, it looks right...no hard white corners on top of a different color.

***************************************
J. Jacobs

http://www.piercedmedia.com

 

[ChrisHunt]

Part 2 is here:

http://www.alistapart.com/articles/customcorners2

Try this too:

http://www.456bereastreet.com/archive/200505/transparent_custom_corners_and_borders/

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd