Javascript-форум - Выталкивание float

Здравствуйте! Как решить проблему выталкивания float-вкладок вниз.
В браузере IE8 при масштабировании (Ctrl+) выше определенной величины, вкладки уходят вниз, в чем суть и как решить проблему?
Для сравнения, например, в Google Chrome, при 300% и выше, все нормально, т.е просто появляется горизонтальная полоса прокрутки, чего ожидалось и от IE8
Использованные стили:

.tabs { 
    margin: 0.8em 4px -1px;
    height: 2.2em; 
	white-space:nowrap;
	}	
.tabs li {
    float: left;         
    padding-right: .25em;  /* расстояние между вкладками справа */
    height: 2.2em;
    position: relative;
    z-index: 1;
    border-bottom: 2px solid #FFF;
	}

Вкладки:

Код:

<tr class="headbox_main"> 

 <td colspan="7"> 

  <ul class="tabs">

   <li><a href='#'>Вкладка 1</a></li>

   <li><a href='#'>Вкладка 2</a></li> 

   <li><a href='#'>Вкладка 3</a></li> 

   <li><a href='#'>Вкладка 4</a></li>   

   <li><a href='#'>Вкладка 5</a></li>  

  </ul>

 </td>

</tr>

Вид вкладок в файле "tab.jpg"