Css list align problems

Question

Hei guys, I have the following problem:

• 

As I can see those arrows are not aligned with the text, I've tried alot of things but I didn't find a solution, mabe you can help me, here is my code:

    .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;                
        }

AND THE 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 -->

What I'm doing WRONG?

Answer 1

Your background arrow is part of your a tag. How about:

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

For all cases?

Answer 2

It seems you're using a css-sprite. Just adjust the numbers (-46 and -96) until it is right and get rid of the inconsistencies like a height that is smaller than the line-height.

Edit: By the way, you might want to switch to block instead of inline-block for the links for IE6.