Новости Joomla

0 Пользователей и 1 Гость просматривают эту тему.
  • 7 Ответов
  • 3168 Просмотров
*

beliyadm

  • Легенда
  • 9758
  • 1664 / 66
  • Севастополь, Россия
Псевдокласс first-letter в IE6
« : 25.02.2008, 15:10:57 »
Знатоки CSS, поделитесь умением :)
Хочу сделать буквицу для ссылок в главном меню, в стилях имею:
a.mainlevel:first-letter{color: #FFBF00;} - работает в мозилле как надо, в IE не отображает псевдокласс
Стоит поставить пробел перед открывающей скобкой
a.mainlevel:first-letter {color: #FFBF00;} - в осле слетает оформление меню вообще
Доктайп объявлен
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Грешу на него...
Вот такой пример корректно работает везде, а вот a.mainlevel не хочет...
Код
<style>
h1:first-letter {text-decoration:underline;}
</style>
<h1>hello</h1>
Все истины, которые я хочу вам изложить, — бесстыдная ложь. Сделать всё хорошо
TLG: @Beliyadm
*

poizon

  • Захожу иногда
  • 495
  • 187 / 1
  • Buu
Re: Псевдокласс first-letter в IE6
« Ответ #1 : 25.02.2008, 15:34:13 »
вот что найти смог

хотя уверен, что читал уже ))
« Последнее редактирование: 25.02.2008, 15:40:52 от poizon »
*

beliyadm

  • Легенда
  • 9758
  • 1664 / 66
  • Севастополь, Россия
Re: Псевдокласс first-letter в IE6
« Ответ #2 : 25.02.2008, 15:44:06 »
Читал :(
a:link:hover:first-letter {font-weight: bold;} - отрабатывает ховер только в IE, в мозилле вообще не работает (причем вся ссылка выделяется)
Все истины, которые я хочу вам изложить, — бесстыдная ложь. Сделать всё хорошо
TLG: @Beliyadm
*

beliyadm

  • Легенда
  • 9758
  • 1664 / 66
  • Севастополь, Россия
Re: Псевдокласс first-letter в IE6
« Ответ #3 : 25.02.2008, 15:58:35 »
В общем сейчас имею такие стили:
Код
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;
}
Именно без пробелов - в мозилле работает. С пробелами слетает в дефолтное отображение в IE, пока никакие манипуляции не помогли :)
Все истины, которые я хочу вам изложить, — бесстыдная ложь. Сделать всё хорошо
TLG: @Beliyadm
*

beliyadm

  • Легенда
  • 9758
  • 1664 / 66
  • Севастополь, Россия
Re: Псевдокласс first-letter в IE6
« Ответ #4 : 29.02.2008, 03:14:29 »
да все уже сказал - делаем меню, стандартное, горизонтального расположения
Код
<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>
В стилях имею выше приведенный в 3-м посте стили.
Без пробелов в мозилле работает как само по себе так и при наведении, в ИЕ не работает ни link ни hover - стоит поставить пробел перед скобкой  - в ИЕ вообще стили не хватаются для меню.
В вложении - первая картика без пробелов: сверху отображение кнопки для мозиллы link слева и hover справа (то есть все как и планировалось), снизу в IE 6 - псевдоклассы не работают
Вторая картинки - пробел перед скобкой - в мозилле все также работает, а IE 6 слетают вообще стили
            

[вложение удалено Администратором]
Все истины, которые я хочу вам изложить, — бесстыдная ложь. Сделать всё хорошо
TLG: @Beliyadm
*

beliyadm

  • Легенда
  • 9758
  • 1664 / 66
  • Севастополь, Россия
Re: Псевдокласс first-letter в IE6
« Ответ #5 : 01.03.2008, 16:43:42 »
OnTheFlyRU - если честно, первый раз вижу от вас подобную активность )
Данный пример не помог, ибо проблема в разной интерпретации мозиллы и 6-го ИЕ строки:
.mainlevel:first-letter {color: #FFBF00; font-size: 20px; }
А точнее - наличие\отсутствие пробела перед скобкой.
В общем пока отказался вообще от данной идеи, всем спасибо ))
Все истины, которые я хочу вам изложить, — бесстыдная ложь. Сделать всё хорошо
TLG: @Beliyadm
*

beliyadm

  • Легенда
  • 9758
  • 1664 / 66
  • Севастополь, Россия
Re: Псевдокласс first-letter в IE6
« Ответ #6 : 01.03.2008, 17:03:16 »
Код
<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 , но решения пока не нашел)
Все истины, которые я хочу вам изложить, — бесстыдная ложь. Сделать всё хорошо
TLG: @Beliyadm
*

beliyadm

  • Легенда
  • 9758
  • 1664 / 66
  • Севастополь, Россия
Re: Псевдокласс first-letter в IE6
« Ответ #7 : 01.03.2008, 17:23:21 »
Извиняюсь, видимо я что-то тоже путаю...
В чистом виде у меня это тоже работает, а вот в связке в движком нет.
Видимо где то стили накладываются.
Спасибо за помощь, пойду чистить классы, позже отпишу
Все истины, которые я хочу вам изложить, — бесстыдная ложь. Сделать всё хорошо
TLG: @Beliyadm
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

Свойство letter-spacing по-разному отображается на разных мониторах

Автор V@lentin

Ответов: 1
Просмотров: 1093
Последний ответ 19.07.2018, 20:53:29
от Zelyonkin
Не применяется псевдокласс :not

Автор intedant

Ответов: 7
Просмотров: 846
Последний ответ 29.12.2015, 14:25:33
от intedant