CSS sliding-window rounded-corner buttons: how to avoid the "dead" area on right side of "window"?

The html / CSS I've been using is below.

When the cursor is over .buttonR, there is no :hover effect, nor does it properly submit when clicked. There is a 6-pixel dead area on that right side that I'm trying to get around. Any suggestions? Is there a flaw in my original approach at achieving rounded-corner buttons?

Thanks.

    <span class="buttonR">
<input type="submit" id="updateReview" class="buttonL" value="Save changes" />
    </span>

.buttonL
{
    font-size: 18px;
    height: 26px;
    padding: 0px 0px 8px 6px;
    background-color: transparent;
    background-image: url('../Images/buttonL.gif');
    background-repeat: no-repeat;
    cursor: pointer;
    margin: 0px 0px 0px 6px;
}

.buttonR
{
    float: left;
    padding-right: 6px;
    height: 26px;
    background-color: transparent;
    background: url('../Images/buttonR.gif') no-repeat scroll top right;
    margin: 0px 6px 0px 0px;
}

Update:

So I've managed to solve the "dead area" problem using a variation of zzzz's answer:

<button type="submit" class=&qu开发者_JS百科ot;buttonR">
  <span class="buttonL">Save Changes</span>
</button>

but for the life of me, I cannot get a consistent vertical alignment between browsers. Chrome and IE are aligned, while Firefox will have a 2 pixel variance between .buttonL and .buttonR.

I've heard of variances between browsers, but thought for sure there was a workaround somewhere. I can't find it... damnation this is frustrating.

Update #2

Here's what I wound up with after an hour of messing with the padding and margins:

You'll have to check if it works in IE etc:

<button type="submit" class="buttonR">
  <span class="buttonL">Save Changes</span>
</button>

I try to avoid the button element, but it may be of help to you in this case.

Try this:

html:

<div class="cornerLeft"></div>
        <input type="submit" id="updateReview" class="buttonL" value="Save changes" />
<div class="cornerRight"></div>
<div class="clear"></div>

css:

 .cornerLeft, .cornerRight, .buttonL{
    float:left;
}
.cornerLeft{
    width:10px;/*the width of the left corner*/
    height:26px;
    background:#ffa;/*put url to image leftCorner*/
}
.cornerRight{
    width:10px;/*the width of the right corner*/
    height:26px;
    background:#ffa;/*put url to image rightCorner*/
}
.buttonL
{
    display:block;
    font-size: 18px;
    height: 26px;
    padding: 0px 6px 8px 6px;
    background-color: none;
    border:none;/*set to none*/
    background-image: url('../Images/buttonL.gif') no-repeat;

    background-repeat: no-repeat;
    cursor: pointer;
}

.buttonL:hover{
    background-image:url();/*enter your path here*/
    background:#ccc;/*set to none*/
}

.clear{
    clear:both;
    float:none;
}

see it in action http://jsfiddle.net/2E2UJ/1/ New link!

You will need to subtract the padding from left and right from the total width of the image you use as background of the button.

jsFiddle demo

HTML

<span class="buttonR">
<input type="submit" id="updateReview" class="buttonL" value="Save changes" />
</span>

CSS

.buttonL, .buttonR
{
  height: 26px;
}
.buttonL
{
  font-size: 18px;
  padding: 0px 27px;
  background: transparent url('http://imgur.com/gGIYJ.png') no-repeat -2px left;
  cursor: pointer;
  margin-left; 6px;
}
.buttonR
{
  padding: 0px;
  background:transparent url('http://imgur.com/JnSVn.png') no-repeat -3px right;
}
.buttonR:hover{
  background-color:black;
}
.buttonL:hover{
  color:white;
}