tcat padding problem

[Pandemix]

I have added a tcat that uses a middle, right and left corner (all different images). I added the coding in the right templates and I have the three part tcat code working.

However, the gradient from the original tcat class still shows up behind it. See Screenshot 1 below:



I cannot get rid of it properly.

What I did at first was set the padding on the "tcat" class in the Styles manager was: padding: 0;. It did shrink to what I want



But this affects other pages as well using the tcat class:



(tcat take from the forum view section)

How can I shrink the tcat on the index page without messing it up on my other pages?
----------------------------------

Three Part tcat Code CSS:

.tcat_main {
background: url(http://sixpop.com/images/file/77938217.gif) top left repeat-x;
height: 31px;
}

.tcat_left {
background: url(http://sixpop.com/images/file/78314222.gif) top left no-repeat;
height: 31px;
}

.tcat_right {
background: url(http://sixpop.com/images/file/61109970.gif) top right no-repeat;
height: 31px;
}

.tcat_text {
padding: 10px; /* may need to play around with this value depending on your images */

Template I applied the tcat DIVs to:

forumhome_forumbit_level1_nopost

</table>
<br />

<table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%" align="center">

<tbody>
	<tr>
		<td class="tcat" colspan="<if condition="$vboptions[showmoderatorcolumn]">6<else />5</if>">

<div class="tcat_main"><div class="tcat_left"><div class="tcat_right"><div class="tcat_text">

			<if condition="$childforumbits">
			<a style="float:$stylevar[right]" href="#top" onclick="return toggle_collapse('forumbit_$forumid')"><img id="collapseimg_forumbit_$forumid" src="$stylevar[imgdir_button]/collapse_tcat{$collapseimg_forumid}.gif" alt="" border="0" /></a>
			</if>
			<a href="forumdisplay.php?$session[sessionurl]f=$forum[forumid]">$forum[title]</a>
			<if condition="$show['forumdescription']"><div class="smallfont">$forum[description]</div></if>
			<if condition="$show['subforums']"><div class="smallfont"><strong>$vbphrase[subforums]</strong>: $forum[subforums]</div></if>

</div></div></div></div>
		</td>
	</tr>

    <tr align="center">
      <td class="thead" width="4%">&nbsp;</td>
      <td class="thead" width="65%" align="$stylevar[left]">$vbphrase[forum]</td>
      <td class="thead" width="6%">$vbphrase[last_post]</td>
      <td class="thead" width="6%">$vbphrase[threads]</td>
      <td class="thead" width="6%">$vbphrase[posts]</td>
      <if condition="$vboptions['showmoderatorcolumn']">
      <td class="thead" width="13%">$vbphrase[moderator]</td>
      </if>
    </tr>

</tbody>
<if condition="$childforumbits">
<tbody id="collapseobj_forumbit_$forumid" style="{$collapseobj_forumid}">
$childforumbits
</tbody>
</if>

RED signifies the 3 piece tcat codes

[Audentio]

Since you aren't using rounded corners, you don't need to use the three divs :P. You can use one and add a border and you will get the look you are after. Revert the templates, take out that css I gave you, and add something for the .tcat area in css:

For the background -

#hex url(images/tcat_bg.gif) top left repeat-x;

Then in the extra css portion, try -

border: 1px solid #hex; /* This is that red border you have */

You will also probably need to crop the border out of the main category tcat bg.

[Pandemix]

Actually my tcat strip looks like:

http://sixpop.com/images/file/53751408.gif

Sorry I did not make that clear the first time.