IE7、8、9浏览器中的HTML列表混乱

Question

I have created a site for a Hebrew client. Here is the live demo link:

live link

The top row with links "About Us", "Contact", "Register", "Log In" is not showing properly in any ie browser. The icons should show on right of the text. I have tried different floats and margins, paddings, but it only messes things up.

How do I correct this code, please?

    <div class="logobar">
    <div class="logobar_content">
        <a href="#" class="logo"></a>
        <ul class="toplinks">
            <li><a href="#" class="info_icon">About Us</a></li>
            <li><a href="#" class="envelope_icon">Contact</a></li>
            <li><a href="#" class="pen_icon">Register</a></li>
            <li><a href="#" class="lock_icon">Log In</a></li>
        </ul>

        <div class="left">
            <p class="scart">
                <span>0</span>items<a href="#">Checkout</a>
            </p>

            <form action="post" class="search_form">
                <input type="text" id="search" class="search" />
                <input type="submit" id="submit" class="submit" value="" />                    
            </form>
        </div>
    </div>
</div>




    /*=========== LOGO BAR =========*/
.logobar {
    height: 95px;
    overflow: hidden;
    position: relative;
    margin: 0 auto;
    width: 100%;
    background: #f0f0f0 url(../images/logobar_repeat.png) 0 0 repeat-x;
}


.logobar_content {
    width: 960px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}


.logo {
    background: url(../images/logo.png) 0 0 no-repeat;
    position: relative;
    float: right;
    width: 312px;
    height: 71px;
    margin-top: 13px;
}


ul.toplinks {
    float: left;
    width: 500px;
    margin-top: 15px;
}

.toplinks li {
    float: right;
    list-style: none;
    border-left: 1px solid #888;
    padding: 0 13px 0 20px;
}

.toplinks li a {
    padding: 0 0 0 35px;
    font-family: Trebuchet MS, Arial, sans-serif;
    font-size: 12px;
    text-transform: uppercase;
    color: #444;
    text-decoration: none;
    text-align: right;
}

.toplinks li a.info_icon, .toplinks li a.envelope_icon, .toplinks li a.pen_icon, .toplinks li a.lock_icon {
    background: url(../images/info_icon.png) 0px 0 no-repeat;
    width: 18px;
    height: 15px;
}

.toplinks li a.envelope_icon {
    background: url(../images/envelope_icon.png) 0 0 no-repeat;
}

.toplinks li a.pen_icon {
    background: url(../images/pen_icon.png) 0 0 no-repeat;
}

.toplinks li a.lock_icon {
    background: url(../images/lock_icon.png) 0 0 no-repeat;
}




.scart {
    background: #eee url(../images/basket2.png) 95% 2px no-repeat;
    float: right;
    height: 25px;
    margin: 17px 0px 0 25px;
    padding: 3px 40px 0px 10px;
    border: 1px solid #ccc;
}

.scart a {
    float: right;
    color: #ff720c;
    font-weight: bold;
    font-size: 14px;
    margin-left: 5px;
}

.scart span {
    margin-left: 4px;
}


.search_form {
    float: left;
    clear: left;
    height: 26px;
    margin-top: 20px;
    background: url(../images/search_left2.png) 100% 0 no-repeat;
}

.search {
    background: url(../images/search_repeat.jpg) 0 0 repeat-x;
    border: none;
    margin: 0 11px 0 0px;
    float: right;
    width: 170px;
    height: 26px;
}

.submit {
    background: url(../images/search_right2.png) 0 0 no-repeat;
    width: 35px;
    height: 26px;
    float: left;
    border: none;
}

Thanks.

Answer 1

It is so simple to accomplish that see the css rules below and rest you change as per your need.

.toplinks li a.lock_icon {
    background: url("../images/lock_icon.png") no-repeat scroll 95% 0 transparent;
}

.toplinks li a {
    color: #444444;
    font-family: Trebuchet MS,Arial,sans-serif;
    font-size: 12px;
    padding: 0 35px 0 0; // See the css padding i changed to right 
    text-align: right;
    text-decoration: none;
    text-transform: uppercase;
}