Creating a CSS equivalent

[meeesta]

Hello.

I'm currently creating a website, and in the process trying to be more W3C
friendly by using xhtml and css.

My problem is I have a table and as part of the design, boxes appear with the
corners rounded off. So the table (not using CSS) had to have at least 9 cells
to create the above effect, as shown below (or see the HTML further down)...

Top-left Cell | topleft corner image Top-middle Cell | Top
border Top-right Cell | topright corner image

Centre-left Cell | Left border Centre-middle Cell |
CONTENT Centre-right Cell | Right border

Bottom-left Cell | botleft corner image Bottom-middle | Bottom border
Bottom-right | botright corner img


<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td><img src="images/grey-corner-tl.gif" width="17" height="17" border="0"
alt="" /></td>
<td class="top"><img src="images/spacer.gif" width="17" height="17"
border="0" alt="" /></td>
<td><img src="images/grey-corner-tr.gif" width="17" height="17" border="0"
alt="" /></td>
</tr>

<tr>
<td class="left"><img src="images/spacer.gif" width="17" height="17"
border="0" alt="" /></td>
<td width="761">Content</td>
<td class="right"><img src="images/spacer.gif" width="17" height="17"
border="0" alt="" /></td>
</tr>
<tr>
<td><img src="images/grey-corner-bl.gif" width="17" height="17" border="0"
alt="" /></td>
<td class="bottom"><img src="images/spacer.gif" width="17" height="17"
border="0" alt="" /></td>
<td><img src="images/grey-corner-br.gif" width="17" height="17" border="0"
alt="" /></td>
</tr>
</table>

Is there any way of reproducing this using css without a table, or a least
simplifying it a bit to lose some of the spacer gifs?

Any help would be greatly appreciated.

Many thanks for your time.
Meeesta

[rob::digitalburn]

I'd forget the rounded corners - work with the medium, not against it. But
if you must keep them, just position the corner images using CSS, forget the
spacers and tables and stuff. Do your layout using div tags.



meeesta wrote:

> Hello.
>
> I'm currently creating a website, and in the process trying to be
> more W3C friendly by using xhtml and css.
>
> My problem is I have a table and as part of the design, boxes appear
> with the corners rounded off. So the table (not using CSS) had to
> have at least 9 cells to create the above effect, as shown below (or
> see the HTML further down)...
>
> Top-left Cell | topleft corner image Top-middle Cell
> | Top border Top-right Cell | topright corner image
>
> Centre-left Cell | Left border Centre-middle
> Cell | CONTENT Centre-right Cell | Right border
>
> Bottom-left Cell | botleft corner image Bottom-middle |
> Bottom border Bottom-right | botright corner img
>
>
> <table cellpadding="0" cellspacing="0" border="0">
> <tr>
> <td><img src="images/grey-corner-tl.gif" width="17" height="17"
> border="0" alt="" /></td>
> <td class="top"><img src="images/spacer.gif" width="17" height="17"
> border="0" alt="" /></td>
> <td><img src="images/grey-corner-tr.gif" width="17" height="17"
> border="0" alt="" /></td>
> </tr>
>
> <tr>
> <td class="left"><img src="images/spacer.gif" width="17"
> height="17" border="0" alt="" /></td>
> <td width="761">Content</td>
> <td class="right"><img src="images/spacer.gif" width="17"
> height="17" border="0" alt="" /></td>
> </tr>
> <tr>
> <td><img src="images/grey-corner-bl.gif" width="17" height="17"
> border="0" alt="" /></td>
> <td class="bottom"><img src="images/spacer.gif" width="17"
> height="17" border="0" alt="" /></td>
> <td><img src="images/grey-corner-br.gif" width="17" height="17"
> border="0" alt="" /></td>
> </tr>
> </table>
>
> Is there any way of reproducing this using css without a table, or a
> least simplifying it a bit to lose some of the spacer gifs?
>
> Any help would be greatly appreciated.
>
> Many thanks for your time.
> Meeesta

[bsnyder2004]

The easiest way to do that in CSS would be to create a layer using the
&lt;div&gt; tag and then position the graphics so they float to the left and
right of your content. Something like this: CSS #body { put your
defs in here } #topleft { float: left; padding: 0px; margin: 0px; }
#topright { float: right; padding: 0px; margin: 0px; } &lt;div
id=&quot;body&quot;&gt; &lt;img src=&quot;filename.gif&quot;
alt=&quot;&quot; id=&quot;topleft&quot; /&gt; &lt;img
src=&quot;filename.gif&quot; alt=&quot;&quot; id=&quot;topright&quot; /&gt;
&lt;/div&gt; you can do that for all the different corner graphics you have.
Should work. BJ