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

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:

alt text

The flaw is that the 6px dead area is the padding on your span. If your button text isn't going to change, consider using a static image background. — zzzzBov, Nov 05 '10 at 19:43
Yeah, that was the whole reason behind using two images, to give it the dynamic-width capability. — asfsadf, Nov 05 '10 at 19:51

score 0 · Accepted Answer · answered Nov 05 '10 at 19:54

0

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.

answered Nov 05 '10 at 19:54

zzzzBov

174,988
54
320
367

Interesting. I'll try it right away. Out of curiosity, why do you try to avoid the button element? Do you avoid the custom buttons altogether, or do you have another method? – asfsadf Nov 05 '10 at 20:05
I think you meant to say, "Why do you try to avoid the `` element?" Answer: http://stackoverflow.com/questions/469059/button-vs-input-typebutton-which-to-use – JohnB Nov 05 '10 at 20:10
Styling the button elements can be really finicky cross-browser. There are some JavaScript driven solutions involving anchor tags. Mostly I try to avoid needing an image for a button. Rounded corners can be done with border-radius...if you don't care about IE. – zzzzBov Nov 05 '10 at 20:10
@JohnB no, I avoid the – zzzzBov Nov 05 '10 at 20:12
Possibly due to exactly what you're talking about, I can't get the two sides to match up vertically. Any ideas? – asfsadf Nov 05 '10 at 20:15
@zzzzBov: but I'm saying that's what PT meant to ask you. – JohnB Nov 05 '10 at 20:15
@JohnB he asked the right question and I answered his question, no correction necessary. I'm not talking about the button type. I'm talking about the – zzzzBov Nov 05 '10 at 20:17
I wound up with some crazy, inconsistent padding numbers, but I finally got a variation of this to work. I hate CSS. Thanks. – asfsadf Nov 06 '10 at 01:51

cac · Answer 2 · 2010-11-05T20:28:23.723

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.

I appreciate the help, but this latest one has a dead area on both sides now, unfortunately. — asfsadf, Nov 05 '10 at 20:33

score 0 · Answer 3 · answered Nov 05 '10 at 20:48

0

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;
}

answered Nov 05 '10 at 20:48

JohnB

18,046
16
98
110

I think there might be something wrong with the background line's format. – asfsadf Nov 05 '10 at 21:27
It has 2 different images... so I'm not sure what you mean. – JohnB Nov 06 '10 at 16:27
1

Also, I ripped out a lot of superfluous CSS from your code, something you still might want to consider even if you use ` – JohnB Nov 06 '10 at 17:07
1

Thanks for the browser tip. I posted the finished image. – asfsadf Nov 06 '10 at 18:12

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

3 Answers3