Не нравятся результаты поиска? Попробуйте другой поиск!
dle-faq.ru FAQ (все вопросы) Общие вопросы Проблема с шрифтом, как обрезать в высоту?

Проблема с шрифтом, как обрезать в высоту?


     10.03.2013    Общие вопросы    2533

вопрос
Проблема с шрифтом, как обрезать в высоту?


серый фон под низом иконок (конверт, карандаш, и т.п.) это toolbar () сами иконки в такой структуре :

<div><a href="#">иконка шрифт</a></div>


так вот когда мышку наводишь примерно где красная полоса то ссылка кликабельна. Я знаю что это вина шрифта, но незнаю как данную проблему можно решить. как можно уменьшить высоту не меняя размер шрифта ? Я уже пробовал и размер меньше ставить и писал display:block; ничего не помогло.

Если кто знает как это решить подскажите пожалуйста.

P.S. иконки это шрифт такой

Ответа пока нет


Комментарии пользователей (3)

ПафНутиЙ
1065

3396 | 2434

ПафНутиЙ - 10 марта 2013 11:43 - Админ

ссылка на сайт или просто пример была бы намного понятнее.

Каков вопрос - таков и ответ. Просто помните об этом.

nfox25
2 | 1

nfox25 - 10 марта 2013 18:07 - Юзер

В том то и дело что шаблон делаю на локальном сервере (denwer). Я покопался в интернете и нашел такую информацию про em box, это невидимая рамка вокруг каждой буквы. Объясню еще раз. Есть тулбар div высотой 48px. В нем кнопки тоже div в которых ссылки, иконки это шрифт (скачал по адресу entypo.com). так вот когда размер шрифта ставишь 48px то он почему то выходит за рамки тулбара. То есть как видно на картинке, сам шрифт нормального размера а вот невидимые грани текста выходят за пределы. Я точно не знаю что это (или baseline или em box ) или еще что то. Мне надо как то устранить эту проблему. Пробовал в css писать разные положения текста по вертикали и пробовал div'у в котором ссылка ставить параметр display:block и другие чтоб он обрезал по размеру но ничего не получилось. Ниже часть кода.

HTML:
[not-group=5]
<div class="toolbar">
   <div class="usrava">
      <a href="{profile-link}">
         <img src="{foto}" />
      </a>
   </div>
   <div class="msgindi">
      <a href="{pm-link}">U+2709 {new-pm}</a>
   </div>
   ...остальная часть кода.....
</div>
[/not-group=5]


CSS:

.toolbar {
   width: 842px;
   height: 48px;
   background: #eaeaea;
}
.usrava {
   float: left;
}
.usrava img {
   width: 48px;
   height: 48px;
}
.msgindi {
   float: left;
}
.msgindi a {
   font-family: entypo;
   font-size: 48px;  /*---или 3.5em; если в em то лучше сглаживание---*/
   color: #666;
   vertical-align: middle;
}

graver
5

95 | 80

graver - 10 марта 2013 13:13 - Юзер

Попробуйте

padding-top: значение;

Чтобы комментировать - войдите или зарегистрируйтесь на сайте

Похожие вопросы