Css button sliding doors

Question

I'm trying to style a button with the css 'sliding doors' technique, but it isn't working properly. I've only got access to firefox 3 at the moment so this issue may not occur in other browsers but I would like to solve it for firefox as well.

Here's a picture of what the problem is:

http://img131.imageshack.us/img131/3559/buttons.png

As you can see the second side is lower than the first by a pixel and also is not over to the right enough. Here is the code I am using:

button
{
    font-weight: bold;
    border: none;
    background: top left url(../images/blue_button_left.gif) no-repeat #24AADF;
    color: #FFFFFF;
    height: 25px;
}

button span
{
    display: block;
    height: 25px;
    background: top right url(../images/blue_button_right.gif) no-repeat;
    position: relative;
}


<a href="http://localhost"><button class="important" type="button"><span>Register</span></button></a>
<button type="submit"><span>Submit</span></button>

How do I fix this problem? I tried relatively positioning the span using top: -1px right: -3px but then the text is mis-aligned.

Thanks.

Answer 1

Try setting the padding for the button to zero, and then playing with the padding-left and width to put the text in the right place.

button { padding:0; padding-left:5px; width:90px; /* total width:95px */ }
button span { ... }

If you look at the HTML block display: padding gets added to the overall width of the object, and the background starts in the padding area, and the right half is padded

However please take note, that button elements are NOT suited for embeding any other nodes inside (like span). They may work OK in the browser, but IE can make your life really hard (not to mention that as far as I know, it's not valid)

Answer 2

http://www.oscaralexander.com/tutorials/how-to-make-sexy-buttons-with-css.html

I just did sliding doors on a div background, and the code from this site worked perfectly.

Answer 3

Form elements like buttons are always hard to style, and riddled with minor bugs like these.

Instead of applying the class to the button element itself, perhaps try and apply the button's styling to an extra span element inside the actual button?

In short:

button {
background: white;
border: 0;
}

button div {
    font-weight: bold;
    border: none;
    background: top left url(../images/blue_button_left.gif) no-repeat #24AADF;
    color: #FFFFFF;
    height: 25px;
}

button div div {
    height: 25px;
    background: top right url(../images/blue_button_right.gif) no-repeat;
    position: relative;
}

And HTML:

<button type="submit"><div><div>Submit</div></div></button>

Answer 4

I use DIVs instead of buttons and have a function to build them in-place. It ends up looking like this:

alt text http://fb.staging.moveable.com/samplebutton.gif

inline script call:

<script type='text/javascript'>makeButton("Log in","login()")</script>

---

code:

function makeButton(text,action) {      
    document.writeln("<a class='titleGen' href='javascript:// "+action+"' onclick='"+action+";return false'><div class='btn'><div class='btnLeft'></div><div class='btnMiddle'><div class='btnText'>"+text+"</div></div><div class='btnRight'></div></div></a>")
}

css:

a.titleGen, .btnText, .btnGText {
    text-decoration:none
}
a.titleGen:hover, .btnText:hover, .btnGText:hover {
    text-decoration:none
}

.btn {
    height:22px;
    display:inline;
    cursor:pointer;
    margin-right:5px;
}
.btnLeft {
    background-image:url(/images/bg_btnLeft.gif);
    width:3px;
    height:22px;
    float:left;
}
.btnRight {
    background-image:url(/images/bg_btnRight.gif);
    width:5px;
    height:22px;
    float:left;
}
.btnMiddle {
    background-image:url(/images/bg_btnMiddle.gif);
    width:auto;
    height:22px;
    float:left;
}
.btnText {
    color:#ffffff;
    font-weight:bold;
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    padding-top:2px;
    padding-left:10px;
    padding-right:10px;
}