Sliding Doors Technique - Browser Compatibility

Question

I am using the sliding doors technique to style buttons on a site I'm making and it seems to be working within Chrome but the background is not displaying for any other browser. My code for the button is below:

<div class="small-white"><a href="#">Done Reading</a></div>

CSS:

.small-white { 
 float:left; 
 background:url(images/small-white-sprite.png) right no-repeat; 
 margin: 15px 5px 0 5px; 
 padding:0; 
 display:block;
            height:22px;
}
.small-white a {
 display:block;
 background:url(images/small-white-left.png) no-repeat left;
 padding:4px 10px 7px 9px;
 color:#333;
 text-decoration:none;
 float:left;
}

Please advise.

Thanks in advance. -B

Answer 1

Since you're using two images anyways (Sliding Doors usually only involves one image; in fact, that's the point), you can just do this instead to keep transparency:

.small-white { 
    background: url(images/small-white-left.png) no-repeat 0 0;
    float: left;
    margin: 15px 5px 0 5px;
    padding: 0 0 0 9px; /* NOTE: 9px should be replaced with the width of above
                                 image. */
}
.small-white a {
    background: url(images/small-white-sprite.png) no-repeat 100% 0;
    color: #333;
    display: block;
    height: 22px;
    line-height: 22px;
    padding: 0 10px 0 0;
    text-decoration: none;
}

The <a> element shouldn't have float: left; (since it has nothing to float around inside the <li> element.) The line-height is for centering the text vertically.

Using just one image isn't possible with transparency, but if you know what the background color will be, you can flatten the image on that color, then you'll be able to use just one image (use the same CSS as now, but add small-white-left.png to the left in small-white-sprite.png, then use that for both elements.)

If you want to have the left-most part of the button clickable, put a <span> element around the text in the <a> element and use this CSS:

.small-white { 
    float: left;
    margin: 15px 5px 0 5px;
    padding: 0;
}
.small-white a {
    background: url(images/small-white-left.png) no-repeat 0 0;
    color: #333;
    display: block;
    padding: 0 0 0 9px;
    text-decoration: none;
}
.small-white span {
    background: url(images/small-white-sprite.png) no-repeat 100% 0;
    display: block;
    height: 22px;
    line-height: 22px;
    padding: 0 10px 0 0;
}