Adding rounded corners?

[ahero4heor]

Kinda stumped...
I've got three classes in my CSS:

Code:

.left{
        background: #000 url(images/thead_left.png) no-repeat
}

.right{
        background: #000 url(images/thead_right.png) no-repeat
}

.center{
        background: #000 url(images/thead_bg.jpg) repeat-x;
        width:884px
}

and my forumbit_depth1_cat:

Code:

<div class="left"><div class="center"><div class="right">
<div class="expcolimage"><img src="{$theme['imgdir']}/{$expcolimage}" id="cat_{$forum['fid']}_img" class="expander" alt="{$expaltext}" title="{$expaltext}" /></div>
<div class="tcat_text"><strong><a href="{$forum_url}">{$forum['name']}</a></strong><span class="smalltext">&nbsp;{$forum['description']}</span></div>
</div></div></div>
<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder">
<tbody style="{$expdisplay}" id="cat_{$forum['fid']}_e">
<tr>
<td class="tcat" colspan="2"><span class="smalltext">{$lang->forumbit_forum}</span></td>
<td class="tcat" width="85" align="center" style="white-space: nowrap"><span class="smalltext">{$lang->forumbit_threads}</span></td>
<td class="tcat" width="85" align="center" style="white-space: nowrap"><span class="smalltext">{$lang->forumbit_posts}</span></td>
<td class="tcat" width="200" align="center"><span class="smalltext">{$lang->forumbit_lastpost}</span></td>
</tr>
{$sub_forums}
</tbody>
</table>
<br />

What else would I need to do?

[ivgeo]

First class should have had width: 884px;

Everything else looks good, do you have any problem?

Here is the best (in my opinion) way to do rounded corners.
http://www.sperling.com/examples/box/

[ahero4heor]

The left corner? Are you sure?
I took a good look at MDT (I found an .xml file in a thread somewhere in this category- I looked at that) and you did it very similarly... It just leaves the collapse and collpse buttons behind with a blank, black bar.

[ivgeo]

MDT is not the best one

I would do it like this (css is not good)

Code:

<div class="center"><div class="left"><div class="right">

first goes thead_bg.jpg, and than left and right corners so they are not covered by thead_bg.jpg

Any screenshot?

Quote:It just leaves the collapse and collpse buttons behind with a blank, black bar.

[ahero4heor]

Ah... Yeah, I'll get one right now, but I'm PMing it to you.

[ivgeo]

argh my bad, I didn't looked at the code very carefully
This should work

Code:

.left {
        background: #000 url(images/thead_left.png) top left no-repeat;
}

.right {
        background: #000 url(images/thead_right.png) top right no-repeat;
}

.center {
        background: #000 url(images/thead_bg.jpg) top center repeat-x;
        width:884px;
}

Code:

<div class="center"><div class="left"><div class="right">
<div class="expcolimage"><img src="{$theme['imgdir']}/{$expcolimage}" id="cat_{$forum['fid']}_img" class="expander" alt="{$expaltext}" title="{$expaltext}" /></div>
<div class="tcat_text"><strong><a href="{$forum_url}">{$forum['name']}</a></strong><span class="smalltext">&nbsp;{$forum['description']}</span></div>
</div></div></div>
<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder">
<tbody style="{$expdisplay}" id="cat_{$forum['fid']}_e">
<tr>
<td class="tcat" colspan="2"><span class="smalltext">{$lang->forumbit_forum}</span></td>
<td class="tcat" width="85" align="center" style="white-space: nowrap"><span class="smalltext">{$lang->forumbit_threads}</span></td>
<td class="tcat" width="85" align="center" style="white-space: nowrap"><span class="smalltext">{$lang->forumbit_posts}</span></td>
<td class="tcat" width="200" align="center"><span class="smalltext">{$lang->forumbit_lastpost}</span></td>
</tr>
{$sub_forums}
</tbody>
</table>
<br />

and maybe change <div class="expcolimage">...</div> to <span class="expcolimage">...</span>