Помогите оптимизировать меню

[ticktack]

Здравствуйте!

Помогите оптимизировать меню для всех браузеров, кроме firefox (в нем отображается как надо).

Суть такова, что картинка в ссылке должна отображаться справа вверху от текста ссылки. Если текст ссылки умещается в одну строку, то все смотрится нормально. Если же текст ссылки длинный и умещается только в 2-3 строки, то во всех браузерах, кроме firefox картинка расоложена вверху, но не справа от верхнего слова, а справа от нижнего слова заезжая на верхнее слово.

Как ни прбовал, никак не получается...

Надеюсь объяснил нормально

Меню:

<div class="menu">
  <div><a href="#"><span>Раздел 1 <img src=".../стрелка.gif"></span></a></div>
  <div><a href="#"><span>Длинное название раздела 2 <img src=".../стрелка.gif"></span></a></div>
  <div><a href="#"><span>Раздел 3 <img src=".../стрелка.gif"></span></a></div>
  <div><a href="#"><span>Очень длинное название раздела 4 <img src=".../стрелка.gif"></span></a></div>
</div>

ЦСС:

.menu {
  width: 122px;
}

.menu div {
  margin-bottom: 6px;
  padding-left: 22px;
}

.menu a
{
  display: inline;
  color: #000;
  text-decoration: none;	
  line-height: 14px;
  font-size: 14px;
  font-weight: bold;	
}

.menu span {
  position: relative;
}

.menu a img {
  position: absolute;
  right: -12px;
  top: 5px;
}

[amelice]

Здравствуйте!

Помогите оптимизировать меню для всех браузеров, кроме firefox (в нем отображается как надо).

Суть такова, что картинка в ссылке должна отображаться справа вверху от текста ссылки. Если текст ссылки умещается в одну строку, то все смотрится нормально. Если же текст ссылки длинный и умещается только в 2-3 строки, то во всех браузерах, кроме firefox картинка расоложена вверху, но не справа от верхнего слова, а справа от нижнего слова заезжая на верхнее слово.

Как ни прбовал, никак не получается...

Надеюсь объяснил нормально

В вашем случае картинка по расположению зависит от длины слов в span.(Край абсолютно позиционированного элемента выравниваются по тому месту, где бы находился край, если бы элемент не был позиционирован.)

Но по вертикали вы четко зафиксировали задав 5px. А по горизонтали так же позиционируется от конца последнего слова.

Поэтому у вас получился эффект "заезда на верхнее слово".

Я думаю, что если вы зададите span'у свойство display:inline-block; то должно помочь.

[ticktack]

Я думаю, что если вы зададите span'у свойство display:inline-block; то должно помочь.

Так я уже пробовал... Если задать span'у это значение получится, что картинки уйдут далеко вправо на всю ширину <div class="menu">.

Может нужно как-то поменять теги? Но как я не менял никак не выходит... В лисе все нормально смотрится, в остальных корявенько.

Возможно кто-нибудь видел подобное на каком либо сайте?

[amelice]

Я думаю, что если вы зададите span'у свойство display:inline-block; то должно помочь.

Так я уже пробовал... Если задать span'у это значение получится, что картинки уйдут далеко вправо на всю ширину <div class="menu">.

Может нужно как-то поменять теги? Но как я не менял никак не выходит... В лисе все нормально смотрится, в остальных корявенько.

Да, где длинные слова. А где короткие, то где слово заканчивается.

Возможно кто-нибудь видел подобное на каком либо сайте?

К сожалению, я не встречала.

Может если только ЖС-ом, если считать количество символов в первой строке..

[ticktack]

А где короткие, то где слово заканчивается.

Да, точно где слово заканчивается.

Может если только ЖС-ом, если считать количество символов в первой строке..

СпасиБо, попробую.

Edited September 19, 2011 by ticktack