Проблема с hover в mozilla FF

[divinorum]

Всем привет!

кусок кода html

<div id="hor-navi" class="moduletablemenu">
      <ul>
        <li>
          <a href="Здесь ссылка"><span>Главная</span></a>
        </li>
      </ul>
</div>

и кусок кода css

.moduletablemenu {
    margin-top: -20px;
    text-align: top;
    background: url('../images/menu.png') bottom left no-repeat;
}
.moduletablemenu ul {
    list-style:none;
    margin-left: 30px;
}
.moduletablemenu li {
    float: left;
    height: 24px;
    font: 17px Arial;
    padding-left: 28px;
    text-decoration: none;
}
.moduletablemenu li a span  {
    cursor: pointer;
    display: block;
    color: #437896;
}
.moduletablemenu li.active span {
    color: #fff;
}
.moduletablemenu li a:hover span {
    color: #437896;
}
.moduletablemenu li a:hover span:first-letter {
    color: #fff;
}

Эффект: все не активные ссылки имеют цвет 437896, на hover меняется цвет первой буквы с 437896 на fff, то есть на белый. после нажатия на ссылку, весь текст принимает белый цвет.

Работает в IE и Opera, а вот в мозиле ховер не срабатывает. Может кт знает, почему так происходит?

Edited March 28, 2011 by divinorum

[artur33]

если посмотреть http://htmlbook.ru/css/hover

то видно что псевдокласс :hover, должен работать в мозиле,ошибок я не увидел, жди кого просветлён-ней

[Serlutin]

:first-letter применим только к блочным элементам. Тег span является строчным.

[divinorum]

:first-letter применим только к блочным элементам. Тег span является строчным.

Хорошо. Почему же тогда в двух других браузерах этот силь срабатывает?

[Serlutin]

Эти браузеры давно славятся плохой поддержкой спецификаций. Так что нужно равняться на FF и Chrome.

[divinorum]

Эти браузеры давно славятся плохой поддержкой спецификаций. Так что нужно равняться на FF и Chrome.

Спасибо.

[psywalker]

.moduletablemenu li a span {

cursor: pointer;

display: block;

color: #437896;

}

[SelenIT]

:first-letter применим только к блочным элементам

Спасибо за информацию (я, если честно, не знал). Но должен уточнить. В спецификации сказано, что :first-letter применяется к блочным контейнерам, к которым относятся любые элементы с display:block (независимо от их изначального происхождения). Так что в данном случае span полностью подходит под соотв. определение. И более того, в статическом случае (просто для .moduletablemenu li a span:first-letter, без :hover) псевдоэлемент в нем срабатывает!

Так что, похоже, здесь всё-таки досадный баг Мозиллы.

[divinorum]

Спасибо за информацию (я, если честно, не знал). Но должен уточнить. В спецификации сказано, что :first-letter применяется к блочным контейнерам, к которым относятся любые элементы с display:block (независимо от их изначального происхождения). Так что в данном случае span полностью подходит под соотв. определение. И более того, в статическом случае (просто для .moduletablemenu li a span:first-letter, без :hover) псевдоэлемент в нем срабатывает!

Так что, похоже, здесь всё-таки досадный баг Мозиллы.

Да, это я тоже пробовал. Но проблема в том, что это не нравится человеку, который попросил меня сделать ему такое меню)) Ему нужно именно(!), чтобы первая буква меняла цвет при наведении.

В принципе есть альтернатива. Немного переписать код с заменой тега span на b, но это сработает только в статичном html сайте. И display: block там вроде бы как не нужен. На джумле не прокатит) А нужно как раз на джумле.

Edited March 28, 2011 by divinorum

[SelenIT]

Похоже, этот древний-древний баг: https://bugzilla.mozilla.org/show_bug.cgi?id=8253

с заменой тега span на b

Не должно ничего изменить, имхо. Единственная альтернатива, которую я вижу — сделать этот эффект скриптом (добавляя еще один <span> для первой буквы динамически). Но проще убедить заказчика "не хотеть странного", по-моему.

[divinorum]

Похоже, этот древний-древний баг: https://bugzilla.mozilla.org/show_bug.cgi?id=8253

Не должно ничего изменить, имхо. Единственная альтернатива, которую я вижу — сделать этот эффект скриптом (добавляя еще один <span> для первой буквы динамически). Но проще убедить заказчика "не хотеть странного", по-моему.

Я имел в виду это:

ul.menu li { 
    ...
    display: inline; 
    color: #437896;
}
ul.menu li a { 
    color: #437896;
    text-decoration: none;
}
 ul.menu li a b { color: #437896; }
 ul.menu li a:hover b { color: #fff; }
 ul.menu li  b { color: #fff; }

С этим кодом в статичном варианте сайта - работает во всех 3х браузерах. Там все намного проще, тегом b оборачивается первая буква ссылки.

[psywalker]

Я имел в виду это:

ul.menu li { 
    ...
    display: inline; 
    color: #437896;
}
ul.menu li a { 
    color: #437896;
    text-decoration: none;
}
 ul.menu li a b { color: #437896; }
 ul.menu li a:hover b { color: #fff; }
 ul.menu li  b { color: #fff; }

С этим кодом в статичном варианте сайта - работает во всех 3х браузерах. Там все намного проще, тегом b оборачивается первая буква ссылки.

Пральна, нормальный вариант.