Replace text inside a list with an image

Question

So I'm trying to replace text (link) inside a list with an image. This doesn't seem to work

my code:

HTML:

<div id = "headeranna"> 
    <ul>
        <li><a href="#" id="annaklein">Vraag het aan Anna</a></li>
        <li><a href="#">Vraag het aan Anna</a></li>
    </ul>
</div>

CSS:

#headeranna {
    position: absolute;
    margin-left:410px;
    margin-right: 10px;
    margin-top: -90px;
    float:right;
}

#annaklein{
    display:block;
    width: 26px;
    height: 26px;
    background: url(small_anna.gif);
    text-indent: -9999px
}

This doesn't do anything at all, am I missing something?

I'm not allowed to use javascript, any other way to fix this? — jvh, May 12 '13 at 13:59
I think this should answer your question: [Hide Text Using CSS](http://stackoverflow.com/questions/471510/hide-text-using-css) — Qvcool, May 12 '13 at 14:05

score 1 · Answer 1 · answered May 12 '13 at 14:02

1

There can be different kind of problems:

wrong url for the image
too big image and it's left top corner is transparent or same as background
etc...

I suggest you to use the background link this:

background: transparent url(small_anna.gif) top left no-repeat;

or at least try:

background: red; /* you can start with checking if you can see the background */

And maybe you should put your code to JsFiddle, there we can see your problem.

answered May 12 '13 at 14:02

seniorpreacher

666
2
11
31

Thanks for the response, this did not fix it though. I have removed the text from the list now and did it that way – jvh May 12 '13 at 14:10

Fico · Answer 2 · 2013-05-12T14:27:38.327

1

It is a good practice to use quotes

  background: url("small_anna.gif");

By the way...

An absolute positioned element will always compute float to value "none". So the declaration in #headeranna float:right; is not necessary.

Take care that the path for your image is ok in relation to your document

You can see this background working here fiddle (I modify some margin values just for the example target)

edited May 12 '13 at 14:27

answered May 12 '13 at 14:08

Fico

2,317
18
19

I guess you're right, however this isn't the problem because it does work for an image which isn't in a list. – jvh May 12 '13 at 14:09
Quotes aren't always needed when specifying background urls. It works either way unless you need to escape quote characters in the url. – Mat Richardson May 12 '13 at 14:11

score 0 · Answer 3 · answered May 12 '13 at 14:46

0

Try this in your CSS

#annaklein{
list-style-type: none;
list-style-image:url("small_anna.gif");
width: 26px;
height: 26px;
text-indent: -9999px;}

answered May 12 '13 at 14:46

matzone

5,703
3
17
20

Replace text inside a list with an image

3 Answers3