Проблема с версткой меню

[Dexo]

Доброго времени суток, форумчане. Прошу помощи в решении следующей задачи: нужно сверстать меню по ширине сайта (960px), при этом пукнты меню должны равномерно распределиться по ширине родительского блока (те самые 960px).

 

Итак, html разметка:

<div class="wrapper"><ul class="main_menu">	<li><a href="#">Главная</a></li>	<li><a href="#">Контакты</a></li>	<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="#">Текст другой длины</a></li></ul></div>

сss:

*{    padding: 0;    margin: 0;}.wrapper{    width: 960px;    margin: 0 auto;    background: #e6e6e6;}.main_menu{	width: 100%;	overflow: hidden;	margin-top: 2px;	margin-bottom: 2px;	position: relative;	list-style: none;}.main_menu li{	float: left;	background: #2e2e2e;	margin-right: 2px;	font-size: 16px;	color: #ffffff;}.main_menu li:last-child{	margin-right: 0;}.main_menu li a{	color: #ffffff;	display: block;	padding: 11px 21px;}.main_menu li:hover{	background: #df700d;}

И всё бы в этом варианте хорошо, но справа у всех браузеров остается разный отступ. А справа отступа быть вообще не должно. Т.е. меню должно лечь аккурат в 960px.

 

В идеале (по макету) это надо бы сделать с помощью letter-spacing, но у этого свойства с кроссбразуерностью вообще ад.

 

Если это не сделать на css, посоветуйте решение на javascript.

[Struggle]

http://jsfiddle.net/qK922/ так ?

[npofopr]

http://css-live.ru/articles-css/ravnomernoe-vyravnivanie-blokov-po-shirine.html

[Dexo]

Struggle, спасибо, табличное отображение действительно работает. Что-то я даже не подумал об этом.