Съезжают пункты меню, как исправить?

Question

[Александр Балашов]

Здравствуйте!
Сразу дам ссылку на код: jsfiddle.net/T2xa7
При наведении на пункты меню, они съезжают вправо на несколько пикселей. Как сделать, чтобы он остался на месте?

Answer 1

[Юрий Лобанов]

Использовать font-weight для активной ссылки можно только если справа ничего не стоит или задана фиксированная ширина. Все остальные варианты, в т. ч. letter-spacing — это очень шаткие варианты, очень зависимые от системы.
Вопрос можно решить с помощью js, но делать такое с помощью js не рекомендую, лучше поговорите с дизайнером.

Comments

[Анна Бакурова]

Я про тоже, но если уж прям очень нужно то ls - лучший выход, но с другой стороны Я бы задавала им фиксированную ширину, так как меню наверно не большое. А так то таких дизайнеров лучше не держать и макеты от них не брать

Answer 2

[Анна Бакурова]

задать чёткую ширину или поставить им letter-spacing отрицательный при наведении или положительный при нормальном состоянии

Comments

[Denis Morozov]

фу

[Анна Бакурова]

@morozovdenis есть другие предложения? изложите... Я бы делала через ls, но точно не ширину. Но если такой тупой дизайнер то что сделаешь

Answer 3

[Евгений Низамиев]

Если вам не страшна лишняя разметка, то можно сделать так cssdeck.com/labs/tib2vplb

Создаётся еще один блок, с уже жирным текстом, а потом просто скрывается.

Можно еще вот такой вариант, с помощью дополнительного атрибута и псевдо-элемента cssdeck.com/labs/tib2vplbv2

Answer 4

[Николай Трифонов]

a {
text-decoration: none; /* Убирает подчеркивание для ссылок */
}
a:hover {
text-decoration: underline; /* Добавляем подчеркивание при наведении курсора на ссылку */
}