Replace CSS Link or Hide under with Image?

Question

The problem is on my site: http://windowsphonedaily.blogspot.com/

I've been wracking my brain trying to figure how to solve this. Basically, I wanted to create a "Featured Posts" slider by using EasySlider 1.7 . The slider is the first thing you see when on the site.

Everything seemed to be going well during the install, but once I finished I realized the nextText and prevText was showing on top of my background images. This seems to be a property that can't be modified with css or html as I think it's embedded in the javascript provided.

I tried the Best Answer found in this question ("CSS text replace with image, need hyperlink") and it worked for the nextBtn but when I tried it for the prevBtn the nextBtn disappeared and was replaced by the default setting. If anyone can explain to me how to properly use this method with both buttons, then that solution would be fine.

But if you can't then please help me come up with any other solution. I'm not very well versed with CSS or HTML, so I'm learning as I go right now. It's probably some dumb mistake I made, but I'd still like to know how to fix it!

Thank you in advance to anyone who responds!!

Answer 1

I tested it with firebug directly on Your page. Try this:

#nextBtn a, #prevBtn a {
    display: block !important;
    text-indent: -9999px;
}

Important is this !important ;) It makes that this display: block is more important than display: inline which adds Your slider plugin.

Answer 2

Not quite sure what's going on, but if you go to https://sites.google.com/site/shawnhasinger/files/easySlider1.7.js where you have linked it from, you get a log in page, meaning that it doesn't work! This isn't the issue you are facing, probably because you are logged in...