Question

is there a way to move an image into position that used the backgorund-image property? i have this element in my css and you will see from the image that the arrows are not aligned to the text. i need to move them down? many thanks

grab:

http://img143.imageshack.us/i/ie7listimage.png/

CSS

.footerTextContent
    {

            width:250px;
            height:400px;
            float:left;
            font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
            font-size: 12px;
            color: #fff;
            font-weight: normal;
            padding: 10px 0 0 28px;
            list-style-image:url('../images/tick.png');
            line-height: 30px;
            text-align:justify;

    }

UPDATED CODE

HTML

<div class="footerTextContent">
          <ul>

            <li><a href="#">Some domain</a></li>
            <li>Some domain</li>
            <li>Some domain</li>
            <li>Some domain</li>
            <li>Some domain</li>
          </ul>

        </div>

css

.footerTextContent
    {

            width:250px;
            height:400px;
            float:left;
            font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
            font-size: 12px;
            color: #fff;
            font-weight: normal;
            padding: 10px 0 0 28px;
            line-height: 30px;
            text-align:justify;

    }

.footerTextContent li
    {
            padding: 0 0 0 15px;
            background-image:url(../images/tick.png);
            background-position: left 7px;
            background-repeat: no-repeat



    }

Answer 1

Instead of using

list-style-image:url('../images/tick.png');

on the <ul> have the images as background-image on the <li> directly

.footerTextContent li {
    background-image: url('../images/tick.png');
    background-repeat: no-repeat;
    background-position: left 5px;
}

You can modify the top position of the image for your needs.