CSS sliding door background image problem.
- by ethyreal
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:
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.
