[silurius]

I am trying to customize my buttons using CSS instead of images. I have the basics down pretty well, but am really struggling with one issue in particular as shown in this screenshot.



The right-hand side is not mirroring the left and is stretched out to the max.

I've been combing through the CSS and the template code and cannot seem to fix the problem. Can anyone lend assistance? I know I must be missing something very obvious.

For refererence, the CSS for this template code:

*/ Customized Buttons (Post, etc.) */

.custom_buttons {
  display:block;
  width:130px;
}

.custom_buttons_content {
  background:#9D6B84;
  width:130px;
}

.custom_buttons * {
  display:block;
  height:1px;
  overflow:hidden;
  background:#AD7691;
}

.custom_buttons1 {
  border-right:1px solid #BB7798;
  border-left:1px solid #BB7798;
  padding-right:1px;
  padding-left:1px;
  margin-right:3px;
  margin-left:3px;
  background:#fde2b4;
}

.custom_buttons2 {
  border-right:1px solid #BA97A9;
  border-left:1px solid #BA97A9;
  background:#D8C3CE;
  margin:0 1px;
  padding:0 1px;
}

.custom_buttons3 {
  border-right:1px solid #D8C3CE;
  border-left:1px solid #D8C3CE;
  margin:0 1px;
}

.custom_buttons4 {
  border-right:1px solid #BB7798;
  border-left:1px solid #BB7798;
}

.custom_buttons5 {
  border-right:1px solid #BA97A9;
  border-left:1px solid #BA97A9;
}

And the template code:

<table cellpadding="0" cellspacing="0" border="0" width="100%" style="margin-bottom:3px">
<tr valign="bottom">
    
<!-- START: Custom Post Reply Button -->
        <td class="smallfont2">
        <div>

<b class="custom_buttons">
<b class="custom_buttons1"><b></b></b>
<b class="custom_buttons2"><b></b></b>
<b class="custom_buttons3"></b>
<b class="custom_buttons4"></b>
<b class="custom_buttons5"></b>
</b> <div align="center" class="custom_buttons_content">
        <a href="newreply.php?do=newreply&amp;noquote=1&amp;p=14" rel="nofollow"><strong>Post Reply</strong>
        </a>
        </div>
<b class="custom_buttons">
<b class="custom_buttons5"></b>

<b class="custom_buttons4"></b>
<b class="custom_buttons3"></b>
<b class="custom_buttons2"><b></b></b>
<b class="custom_buttons1"><b></b></b>
</b>
        </div>
<!-- END: Custom Post Reply Button -->
        </td>
    
    
</tr>
</table>

Note that my technique may be hampered by the fact that I am still learning CSS.