Буквицца

Автор: Ognezmej. Опубликовано: 11 Июня 2009

В общем, есть в CSS такой псевдокласс, как first-letter.
В стилях записывается так:

P:first-letter {}

Вместо тэга P можно использовать другие - не знаю, не пробовал. Заявляется стиль после определения самого элемента (в нашем случае P). Итак, задаём нашей буквице размер, шрифт, цвет, и наслаждаемся.

Захотел сделать обтекание, о чём пожалел. По разным браузерам расползлось как тараканы. Ставим line-height, причём в правильном формате (проценты или множитель), прописываем все маржины и паддинги, в результате получаем, что в эксплорере и опере буквица имеет некий необъяснимый отступ сверху, которого нет в фаерфоксе. В случае, если высота буквицы немного меньше, чем высота строки основного текста, помноженная на целое число, это не так страшно. В противном случае за счёт этого самого отступа вниз буквица может ещё строчку сожрать. И как с этим бороться, пока не поняли... Думаем-с

Метки: XHTML, Кодинг

Комментарии

Ognezmej
13 Июня 2009 в 15:45

Нормального стиля так и не получилось.
При помощи игрищ с margin и line-height удалось сделать одинаковое отображение в опере и мозилле, но не в эксплорере. Можно решить при помощи <!--[if lte IE 7]>
Собственно, так и решил
Вот это работает (буквица в три строчки, обычный текст - 12px):

<style type="text/css">
<!--
div.bukvizza:first-letter
{
float:left;
margin: 4px 5px -5px 0px;
padding: 0px;
font-family:"Times New Roman";
font-size:48px;
line-height:0.7;
color:#FF8415;
}
-->
</style>

<!--[if lte IE 7]>
<style type="text/css">
div.bukvizza:first-letter {line-height:0.85;}
</style>
<![endif]-->

Добавить комментарий