Question

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="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:

Answer 1

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.