Question

All right, so this is only a test example (not polished) of something I was working on for a project. Let’s say you have an image being used for navigation set as the background for an element, that image has transparency, and when it is changed, the visible portion of the image is reduced.

I am using iceweasel 10, and when I do this the “shrunken” version of the sprite is merely drawn on top of the previous background. This means that the previous background is still visible around the outside of the smaller sprite.

This can be “fixed” by specifying a background color along with the new image sprite for :active, but what about keeping the the transparency? What if the background isn’t a solid (or known) color?

Here is the issue demonstrated in html. Here is the png used for the sprite.

Is this an artifact of my browser’s rendering engine, or is this standard for CSS? Thanks.

Answer 1

Your problem is that one background is being applied to the a, while the other is on the container. Setting the a;s background does not clear the container’s bakground. Replace:

#home{
left:0px;
width:46px;
background:url('img_navsprites_hover2.png') 0 0;
}
#home a:hover{
background: url('img_navsprites_hover2.png') 0 -45px;
}
#home a:active{
background: url('img_navsprites_hover2.png') 0 -90px;
}

With

#home {
    left: 0px;
    width: 46px;
}
#home a { background: url('img_navsprites_hover2.png') 0 0; }
#home a:hover{ background: url('img_navsprites_hover2.png') 0 -45px; }
#home a:active { background: url('img_navsprites_hover2.png') 0 -90px; }