Question

I noticed I am not the first to ask about CSS sliding doors. However this seems (at least to me) to be a rather odd problem which I have not seen an answer for.

Trying to create a simple rounded corner link button:

html:

<a href="#"  class="link_button"><span>Add A New Somthing</span></a>

css:

    .link_button {
        background: transparent url('img/backgrounds/bg-buttonRight.png') no-repeat scroll top right;
        color: #444;
        display: block;
        float: left;
        font: normal 12px arial;
        height: 41px;
        margin-right: 6px;
        padding-right: 14px; 
        text-decoration: none;
    }

    .link_button span {
        background: transparent url('img/backgrounds/bg-buttonLeft.png') no-repeat top left;
        display: block;
        line-height: 31px;
        padding: 5px 0 5px 14px;
    }

    .link_button:active {
        background-position: bottom right;
        color: #000;
        outline: none; 
    }

    .link_button:active span {
        background-position: bottom left;
        padding: 6px 0 4px 18px; 
    }

results:

alt text http://www.codefruition.com/sandbox/img/buttonProblems/problemImageOne.jpg

The two images are overlapping, which is what I want, but why the discoloration? Why would one be darker? I tried using png jpg, gif, with and without transparency.

I posted the code here, along with another attempt using only one jpg instead of two, but still the same results.

Did I miss something?

Thanks in advance.

Answer 1

Your problem isn’t your CSS. It’s that the images generated for use in the CSS aren’t seamless. The edges have a darker color that doesn’t fade out in less than 14px, the width of the right “door.”

There seems to be a bevel or an inner shadow on the button. If you are the designer and have the Photoshop document, check what the styling is on the button; you may have to shrink the aforementioned styles.