Css rounded image

Question

I have an image with rounded corners(png transparent on the corners), about 150px wide, and 25px height, so i'm trying to use it, but it doesn't work for me:

<button><span>Click me</span></button>

And the css:

button{
    border:0;
    background:url(../images/button.png) no-repeat top left;
    height:24px;
    padding-left:10px;
}

And

button span{
    display:block;
    background:transparent url(../images/button.png) no-repeat top right;
    height:24px;
    padding-right:10px;
}

But it doesn't work correctly, the right corner isn't displayed correctly.Any help?

Best Regards,

Answer 1

First things first: How is it displayed? You're using the same background images for both left and right corner. Is that in order? (I realize that technically it could be) Also, you might want to try and switch the two (left/right), as span is not a block element, and that might be causing your problems (much in the same way that you can't, say, set a width to a span, unless you also set it to render as a block)

Answer 2

your span and button elements have the same height (which is smaller than image height by the way). Another observation: why do you need span element at all?

start with the simplest way to do something:

    <button>Click me!</button>

button {
border: 1px solid #ff0;
padding: 10px;
display:block;
background:transparent url(../images/button.png) no-repeat top centre;
height:25px;

}

this should display your image. Use border property to debug CSS

Answer 3

Using Firebug (use it!) it is clear what is happening. Your right corner shows, but as the the button underneath it continues, you simply don´t see it.

You can solve that using two images, a small one (not so wide, minimum width the padding on the left side) for the left corner and a very wide one for the right corner. That way your buttons don´t overlap and you get the desired effect.