Question

Neither googling nor browsing in SO helped me – hope someone here can solve this :

I have the following html :

<ul>
<li>ABC 1</li>
<li>ABC 2</li>
<li>ABC 3</li>
<li>ABC 4</li>
</ul>

and css

ul {list-style-image:url(../img/hook.png);}
li {vertical-align:middle;color:#FFFFFF;font-size:16px;text-shadow: 0em 0.13em 0.13em #2A2A2A;font-family:Helvetica,Arial,Sans-Serif;font-weight:normal;}

the “hook.png” image is 32×35 px – but whenever I create list items, text (e.g. ABC…) will always be shown below the image. Tried line-height and those 100% thingies – but neither worked out.

Any quick help :/ ?

Answer 1

Try some variation of

ul{
    background-image: url(../img/hook.png);
    background-repeat: no-repeat;
    background-position: 95% 50%;
}

Obviously the position is unlikely to fit your needs, but fiddling around with this method would be your best bet I’d say.