End Of CSS Sprite Button Dropping Off Inside Table

I'm creating a CSS button and it is working ALMOST perfectly. The problem is that when the button is larger than its allotted space, its end drops off to the next line. It also extends the page width to fit it properly, but then the end is on the next line >=(. Extending the page is perfectly fine, but the button should be whole.

Here is my example page... http://www.lolstrategies.com/test/button_sample.htm开发者_运维技巧l

It uses two tables and the button needs to also be in a table.

My current css uses float: left to push the images together as you can see by viewing the source. I'm hoping that it doesn't all need to be completely redone without float but I am willing to do so if that's the only answer.

The image I'm using is this:

You don't have to completely redo it. Just a couple of small changes. Live example: http://jsfiddle.net/tw16/Pwmcn/

.buttonLarge {
    height:22px;
    margin: 0 22px 0 12px; /* add this */
}
.primaryLargeButtonEnd {
    width: 12px;
    height:12px;  
    padding: 0px 0px 0px 5px;
    display: inline-block; /* add this instead of float:left */
    background: transparent url('./composite__V153767378_.png') no-repeat left -75px;
}