Html list messing up in IE7,8,9 browsers - 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">
<ul class="toplinks">
<li>About Us</li>
<li>Contact</li>
<li>Register</li>
<li>Log In</li>
</ul>
<div class="left">
<p class="scart">
<span>0</span>itemsCheckout
</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;
}