Replace text link with image: CSS problem

I'm using Technique #8 from Nine Techniques for C开发者_C百科SS Image Replacement but I'm not seeing the results I expect: instead of nicely positioned images, I'm getting... well, look for yourself:

http://beatchamber.officemedic.net

One change I've made to the technique is to change all the width: 100%/height: 100% values to the actual sizes; without that the images didn't display at all. I'm baffled, however, as to why the technique isn't working. Any suggestions?

The reason is because your background images are larger than the space you want to put them in. Also, your background images have a fair amount of "padding" on the outside of them, lending to that strange spacing where the text starts. If you added more height/width to your list elements, or changed the padding, you could get them looking like you want them to. As-is, though, they get cut off by the 25px/75px width/height.

Its working demo here text is replace by Image using CSS code

Working Demo