I have created a custom CSS for a PayPal sprite that I made.
Below is an image comparison showing how it appears in Internet Explorer and Firefox.
Here is the code to display the sprite:
.ppsprite {
background: url('/images/paypal_sprite.png') no-repeat scroll 0px 0px transparent;
width:200px;
height:100px;
position:absolute;
left:54px;
}
.ppsprite:hover {
background: url('/images/paypal_sprite.png') no-repeat scroll 0px -100px transparent;
}
The HTML code to display the sprite is:
<input class="ppsprite" type="image" name="submit" alt="">
Shown below are screenshots of how the sprite displays in Internet Explorer and Firefox.
The sprite functions correctly in all browsers, but there may be some minor issues such as a border in IE and a missing image icon in the top left corner. In Chrome and Safari, the sprite may also show the alt text on top of the image.