troubleshooting Question

making an image a link

Avatar of K_dot
K_dotFlag for United States of America asked on
Web Languages and StandardsCSSHTML
11 Comments1 Solution353 ViewsLast Modified:
Since I don't want to wrap my images in "a" tags to make the images clickable, I'm currently using this code to make my image links in CSS.
.content-box-promo a {
    color: #FFFFFF;
    font-size: 12px;
    font-weight: bold;
    margin-bottom: 15px;
}

.learn-more {
    background-image: url("../i/btn-learnmore.png");
    background-origin: padding-box;
    background-position: 0 0;
    background-repeat: no-repeat;
    display: block;
    height: 24px;
    text-indent: -9999px;
    width: 123px;
}
However, another coder added a function to the class and the page is behaving very strangely...
<a class="learn-more" onclick="return scie.trackLink({name:'Click Returning Student Promo Learn More',type:'click',link:this});" href="mailto:contentowner@schooldomain.edu?subject=Request%20Info%20on%202012%20ReturningStudent%20Promotion">
The buttons are repeating at the top of the page from the top left and I'm guessing it has something to do with the "text-indent" property I am using.  

Is there another way to make the image clickable in the CSS (no text-indent) so that this does not happen?

Thanks!
Join the community to see this answer!
Join our exclusive community to see this answer & millions of others.
Unlock 1 Answer and 11 Comments.
Join the Community
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 11 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros