Проблемы с выравниванием списка CSS

Question

Привет, ребята, у меня следующая проблема:

• 

Как я вижу, эти стрелки не выровнены с текстом, я много чего пробовал, но не нашел решения, возможно, вы мне поможете, вот мой код:

    .domains-wrapper .sidebar{
        width: 203px;
    }
                   /* For the background */
        .domains-wrapper .links .the-top{
            background: url(/images/top-sidebar-domains.png) no-repeat;
            width: 202px;
            height: 7px;
        }

                    /* For the background */
        .domains-wrapper .links .repeat{
            background: url(/images/repeat-sidebar-domains.png) repeat-y;
            width: 202px;
        }

                            /*---HERE STARTS THE CODE FOR THE LIST ITEMS---*/

            .domains-wrapper .links .repeat ul{
                padding-top: 14px;
                padding-bottom: 14px;
                padding-left:8px;
                padding-right: 8px;
            }
                .domains-wrapper .links .repeat ul li{
                    font-size: 12px;
                    font-weight: bold;
                    padding-left: 5px;
                    height: 47px;
                    border-bottom: 1px solid #f1f1f1;
                }
                .domains-wrapper .links .repeat ul li.hover{
                    background-color: #71ab32;
                }
                .domains-wrapper .links .repeat ul li.active a{
                    background: url(/images/sidebar-domains-arrows.png) no-repeat 0px 0px;
                }                   
                    .domains-wrapper .links .repeat ul li a{
                        display: inline-block;
                        background: url(/images/sidebar-domains-arrows.png) no-repeat 0px -96px;
                        padding-left: 29px;
                        color: #000;
                        height: 25px;
                        line-height: 47px;
                    }

                    .domains-wrapper .links .repeat ul li.hover a{
                        background: url(/images/sidebar-domains-arrows.png) no-repeat 0px -46px;
                        color: #fff;
                    }
                    /*---HERE ENDS THE CODE FOR THE LIST ITEMS---*/


                    /* For the background */
        .domains-wrapper .links .bottom{
            background: url(/images/bottom-sidebar-domains.png) no-repeat;
            width: 202px;
            height: 7px;                
        }

И HTML

            <div class="links">
            <div class="the-top"></div>
            <div class="repeat">
                <ul>
                    <li class="active"><a href="#">Link 1</a></li>
                    <li><a href="#">Link 1</a></li>
                    <li><a href="#">Link 1</a></li>
                    <li><a href="#">Link 1</a></li>
                </ul>
            </div>
            <div class="bottom"></div>
        </div><!-- end /.links -->

Что я делаю НЕПРАВИЛЬНО?

Answer 1

Кажется, вы используете css-спрайт. Просто настройте числа (-46 и -96), пока они не станут правильными, и избавьтесь от несоответствий, таких как height, который меньше, чем line-height.

Редактировать: Кстати, вы можете переключиться на block вместо inline-block для ссылок для IE6.

Answer 2

Ваша фоновая стрелка является частью вашего тега. Как насчет:

padding-left: 29px;
background: url(/images/sidebar-domains-arrows.png) no-repeat left center;

Для всех случаев?