Убрать увеличение длины элемента при увеличении font-weight

[pav8909]

имеется следующий код

<div class="menu33">
	<ul>
		<li class="active"><a href="#">Холодные закуски</a></li>
		<li><a href="#">Салаты</a></li>
		<li><a href="#">Горячие закуски</a></li>
	</ul>
</div>

CSS:

.block1 .menu33 {margin-left: -12px;}
.block1 .menu33  ul li {list-style-type: none; float: left; background: url(../вертикальная полоска) right center no-repeat;}
.block1 .menu33 ul li a {color: #cc3333; float: left; margin: 6px 12px 6px 12px; text-decoration: none; border-bottom: 1px dashed #cc3333;}
.block1 .menu33  ul li:hover a{color: #996666; font-weight: bold; border-bottom: 1px dashed #996666;}

Нужно сделать так, чтобы при наведении курсора на ссылку она не дергалась по ширине.

пробовал сделать у ссылки a {padding: 0 3%;} и a:hover {padding: 0} - текст переносится на 2 строки, если текст ссылки больше 1 слова.

пробовал еще много чего, но все бес толку.

[Catherine]

Задайте блокам фиксированную ширину, например http://jsfiddle.net/chwu8/2/

[pav8909]

Задайте блокам фиксированную ширину, например http://jsfiddle.net/chwu8/2/

очень неуниверсальное решение.

[Radiocity]

Задайте блокам фиксированную ширину, например http://jsfiddle.net/chwu8/2/

очень неуниверсальное решение.

У вас есть альтернативное решение?

Еще бы посоветовал задать overflow:hidden.

[sammasati]

Единственное, что приходит в голову: http://jsfiddle.net/Hb9zF/

Edited January 14, 2012 by sammasati