css showing images twice oppose to once?

Question

i have this css code that shows the photos twice, its wierd, is thier a better i can write this, the links are used to vote using jquery? :)) css code:

a.vote_up, a.vote_down {
        display:inline-block;
    background-repeat:none;
    background-position:center;
        height:30px;
    width:30px;
    margin-left:4px;
    text-indent:-900%;
}

a.vote_up {
    background:url("images/uparrow.png");
}

a.vote_down {
    background:url("images/downarrow.png");
}

html:

<span class='vote_buttons' id='vote_buttons<?php echo $row['id']; ?>'>
        <a href='javascript:;' class='vote_up' id='<?php echo $row['id']; ?>'>Vote Up!</a>

        <a href='javascript:;' class='vote_down' id='<?php echo $row['id']; ?>'>Vote Down!</a>
    </span>

Answer 1

Hi,

Try adding repeat: no-repeat; to your a.vote_up and a.vote_down. By default backgrounds will be repeated.

Good luck, Alin

Answer 2

By using background, you are overwriting the repeat and position settings from the first style definition.

Use background-image instead:

a.vote_up, a.vote_down {
    display:inline-block;
    background-repeat:no-repeat;  //changed to no-repeat
    background-position:center;  
    height:30px;
    width:30px;
    margin-left:4px;
    text-indent:-900%;
}
                  // background-image to prevent overwrite 
a.vote_up {       //    of background-repeat & background-position
    background-image:url("images/uparrow.png"); 
}
a.vote_down {
    background-image:url("images/downarrow.png");
}

And the background-repeat should be no-repeat.