rounded corners

Hello,

Currently one of my forum styles is using rounded corners for all of my category strips and my pages are filled with these bits of html:

Code:

<table width="100%" cellpadding="0" cellspacing="0" border="0">
	<tr>
		<td><img src="$stylevar[imgdir_misc]/_cat-top_lft.gif" alt="" /></td>
		<td width="100%" class="cat-top_x">
			$vbphrase[title]
		</td>
		<td><img src="$stylevar[imgdir_misc]/_cat-top_rht.gif" alt="" /></td>
	</tr>
</table>
<table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%"
	etc.

Would it be better to do this the way vBSEO did instead of listed above?

Code:

<table class="vbseo_top_menu" cellpadding="$stylevar[cellpadding]" cellspacing="0" border="0" width="100%" align="center" style="border-top-width:0px">
	<tr align="center">
		<!-- vbseo top left corner (Optional: enter short message within 'p' tags below) -->
		<td  id="vbseo_top_menu_left_corner" class="vbseo_vbmenu_control" width="100%"><p></p></td>
		<!-- /vbseo top left corner -->
		$vbphrase[title]
		<!-- vbseo top right corner -->
		<td  id="vbseo_top_menu_right_corner" class="vbseo_vbmenu_control"></td>
		<!-- /vbseo top right corner -->
	</tr>
</table>
<table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%"
	etc.

Is your code used (background-images instead of IMG elements with alt attributes) because it's a matter of layout instead of content, or are there other reasons as well?

All style elements should be background images.

img src tags should only be used if the image itself is 'content', ie, a photo page, or a picture inside a post. All layout elements should be background.

if you want to get technical, it shouldn't be done with tables either though...

there's a good blog post here to give you 25 ideas and various ways to pull it off.
25 Rounded Corners Techniques with CSS

Thats an awesome site!

Thanks!

I am indeed planning on going table-less (read less), but for me this is definitely more easier to say than to get it done

However, for now I have brought back

Code:

<table width="100%" cellpadding="0" cellspacing="0" border="0">
    <tr>
        <td class="cat-top_lft"></td>
        <td width="100%" class="cat-top_x">
            $vbphrase[your_control_panel]
        </td>
        <td class="cat-top_rht"></td>
    </tr>
</table>

to

Code:

<div class="cat-top_lft1"></div><div class="cat-top_rht1"></div><div class="cat-top_x1">$vbphrase[your_control_panel]</div>

Nothing fancy yet, but it’s a start