UL LI Horizontal List - html

Question

I have created a simple UL/LI navigation bar. It looks perfectly fine in both IE and Chrome, however in firefox any element after the first element is shifted down by about 35 pixels. I have tried just about everything I could think of to fix this and just cant seem to get it right.
Here is my current code:
HTML
<div class="navigation">
<ul>
<li><span>Home</span></li>
<li><span>My Calendar</span></li>
<li><span>Catalog</span></li>
<li><span>My Learning</span></li>
<li><span>Shopping Cart</span></li>
<li><span>My Account</span></li>
<li><span>Support</span></li>
<li><span>Sign Out</span></li>
<li><span>Admin View</span></li>
</ul>
<div class="clear_float">
</div>
</div>
CSS:
.navigation {
left: 1px;
position: absolute;
text-align: right;
top: 7px;
white-space: nowrap;
}
.navigation ul {
list-style: none;
margin: 0px;
padding: 0px;
}
.navigation ul li {
display: inline;
margin-right: 2px;
}
.navigation ul li a {
display: inline-block;
line-height: 17px;
/*
padding: 1px 11px 0px
*/;
text-decoration: none;
}
a.button_selected_tab {
background: transparent url('images/orange_button_right.png') no-repeat scroll top right;
display: block;
float: left;
font: normal 12px arial, sans-serif;
height: 28px;
margin-right: 6px;
padding-right: 7px; /* sliding doors padding */
text-decoration: none;
color: #FFFFFF;
}
a.button_selected_tab span {
background: transparent url('images/orange_button_left.png') no-repeat;
display: block;
line-height: 28px;
padding: 0px 10px 10px 15px;
}
a.button_inactive_tab {
background: transparent url('images/grey_button_right.png') no-repeat scroll top right;
display: block;
float: left;
font: normal 12px arial, sans-serif;
height: 28px;
margin-right: 6px;
padding-right: 7px; /* sliding doors padding */
text-decoration: none;
color: #FFFFFF;
}
a.button_inactive_tab span {
background: transparent url('images/grey_button_left.png') no-repeat;
display: block;
line-height: 28px;
padding: 0px 10px 10px 15px;
}

Answer 1

I made an example with your code, and removing margin-right:2px; from .navigation ul li set all the elements in the same line. Is this what you need?
Example: http://jsbin.com/uhace3