Question

This is my css for a paypal sprite I have made..

Image below shows what we get in Internet Explorer and what we get in Firefox ..

The code to display the sprite is:

.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 code to display the sprite ( html )

<input class="ppsprite" type="image" name="submit" alt="">

The screenpic ( internet explorer and firefox )

The sprite works perfectly in all browsers, but you can see a shitty border in IE and a kind of missing image icon top left.
In chrome and safari, pretty much same ( but shows alt text on top of sprite )

Answer 1

Add a src attribute to your input tag:

<input class="ppsprite" type="image" name="submit" alt="" src="images/blank.gif">

Just create a file called blank.gif
You don’t need to do anything with it, just make sure it’s in the right directory.