<table width="100%" border="0" cellpadding="0" cellspacing="1">
<tr>
<td nowrap="nowrap">
<a href="" class="mainlevel" id="active_menu">ссылка активная</a>
<a href="" class="mainlevel" >вторая ссылка</a>
</td>
</tr>
</table>
Вот так выглядит исходный код.
В стилях:
a.mainlevel:first-letter{color: #FFBF00; font-size: 20px; }
a.mainlevel:hover:first-letter{color: #ffffff; font-size: 20px; }
a.mainlevel:link, a.mainlevel:visited {
background-image: url(../images/menu_bg.gif);
display:block;
float:left;
background-repeat: no-repeat;
width: 121px;
height: 47px;
color: #ffffff;
text-align: center;
padding-top: 20px;
font-size: 16px;
text-transform: uppercase;
text-decoration: none;
font-weight: bold;
font-family: Helvetica, Geneva, Verdana, Arial, sans-serif;
}
a.mainlevel:hover {
background-position: 0 -67px;
color: #FFBF00;
}
a.mainlevel#active_menu {
background-position: 0 -67px;
}
На отрицательный background не обращать внимание - это у меня картинка\подложка сдвигается вверх.
В вложении 4-го поста две картинки:
Первая картинка без пробелов (a.mainlevel:first-letter{}): сверху отображение кнопки для мозиллы link слева и hover справа (то есть все как и планировалось), снизу в IE 6 - псевдоклассы не работают, но хотя бы стили для a.mainlevel:link, a.mainlevel:visited не слетают.
Вторая картинка - пробел перед скобкой (a.mainlevel:first-letter {}) - в мозилле все также работает, а IE 6 слетают вообще стили.
Вообще идея какая - для обычной и посещенной ссылки выделить первый символ цветом и размером (желтый и 20пкс), для события hover - цвет первого символа вернуть в белый, а остальные покрасить желтым.
В верхней половине первой картинки видно как оно должно было быть - ссылка обычная слева, ссылка наведенная справа.
Проблема в том наличии\отсутствии пробела перед скобкой - стоит поставить его - в ИЕ все исчезает.
Эксперементировал с различными DOCTYPE , но решения пока не нашел)
19.07.2018, 20:53:29