[hhiker]

I could use a little help on my button.tpl file. I am wanting to make it a CSS rollover button (no images what-so-ever) instead of the stock image buttons. The reason for the rollover button it for it to match the navigation rollover that I have created.

Here is the original button code that I THINK I should be modifying:

<table cellspacing="0" cellpadding="0" onclick="{$js_link}" class="ButtonTable"{if $title ne ''} title="{$title|escape}"{/if}>
{strip}
<tr>
<td>
<{$img_type} src="{$ImagesDir}/but1.gif" class="ButtonSide" alt="{$title|escape}" />
</td>
<td class="Button"{$reading_direction_tag}>
<font class="Button">{$button_title}</font>
</td>
<td>
<img src="{$ImagesDir}/but2.gif" class="ButtonSide" alt="{$title|escape}" />
</td>
</tr>
{/strip}
</table>

Here is what I changed it to:

<table cellspacing="0" cellpadding="0" onclick="{$js_link}" class="ButtonTable"{if $title ne ''} title="{$title|escape}"{/if}>
{strip}
<tr>
<td class="rbutton1" onmouseover="this.className='rbutton2'"onmouseout= "this.className='rbutton1'"{$reading_direction_tag }>
<font class="rbuttonf">{$button_title}</font>
</td>
</tr>
{/strip}
</table>

And I have the following CSS for it:

.rbutton {
color: #ff0000;
padding: 6px;
list-style-type: none;
text-align: left;
text-indent: 10px;
white-space: nowrap;
font-size: 11px;
background-color: #554b1e;
border: #000000 1px solid;
}
.rbutton1 {
color: #ffffff;
padding: 6px;
list-style-type: none;
text-align: left;
text-indent: 10px;
white-space: nowrap;
font-size: 11px;
background-color: #554b1e;
border: #000000 1px solid;
}
.rbutton2 {
padding: 6px;
background-color: #8d8558;
color: #000000;
list-style-type: none;
text-align: left;
text-indent: 10px;
white-space: nowrap;
font-size: 11px;
border: #000000 1px solid;
}
A.rbutton1:link {
COLOR: #ffffff;
TEXT-DECORATION: none;
}
A.rbutton1:visited {
COLOR: #ffffff;
TEXT-DECORATION: none;
}
A.rbutton1:hover {
COLOR: #ffffff;
TEXT-DECORATION: none;
}
A.rbutton1:active {
COLOR: #ffffff;
TEXT-DECORATION: none;
}
.rbuttonf {
color: #ffffff;
padding: 6px;
list-style-type: none;
text-align: left;
text-indent: 10px;
font-size: 11px;
}

Can anyone tell me why this is not working? I am not getting the background color that I am looking for nor am I getting my rollover effects.

Thanks!