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)