UL LI Horizonal List

Question

Я создал простую навигационную панель UL/LI. Он отлично выглядит как в IE, так и в Chrome, однако в firefox любой элемент после первого элемента сдвинут примерно на 35 пикселей. Я пробовал почти все, что мог придумать, чтобы исправить это, и просто не могу понять, как это правильно.

Любая помощь с этим очень ценится.

Вот мой текущий код:

HTML

<div class="navigation"> 
     <ul> 
      <li><a href="" class="button_selected_tab"><span>Home</span></a></li> 
      <li><a href="" class="button_inactive_tab"><span>My Calendar</span></a></li> 
      <li><a href="" class="button_inactive_tab"><span>Catalog</span></a></li> 
      <li><a href="" class="button_inactive_tab"><span>My Learning</span></a></li> 
      <li><a href="" class="button_inactive_tab"><span>Shopping Cart</span></a></li> 
      <li><a href="" class="button_inactive_tab"><span>My Account</span></a></li> 
      <li><a href="" class="button_inactive_tab"><span>Support</span></a></li> 
      <li><a href="" class="button_inactive_tab"><span>Sign Out</span></a></li> 
      <li><a href="" class="button_inactive_tab"><span>Admin View</span></a></li> 
     </ul> 
     <div class="clear_float"> 
      &nbsp; 
     </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

Я привел пример с кодом, и удаление margin-right:2px; из .navigation ul li установить все элементы в такой же линия. Это то, что тебе надо?

Пример: http://jsbin.com/uhace3