Jump to content
  • 0

Перекос шрифтов из-за дополнительного DIV'a


brainiac
 Share

Question

Для того, чтобы футер всегда был прилеплен к нижнему краю экрана, весь контент был дополнительно закинут в DIV c ID «wrap». В CSS-файле для этого DIV'a прописано следующее:

#wrap { 
height: auto !important;
min-height:100%;
height: 100%;
}

После этих действий шрифт исказился (стал… жирнее что ли…). Вот:

123kho.png

Если убрать в коммент #wrap, то шрифт восстанавливается, но соответственно футер наезжает на основной контент.

Пожалуйста, подскажите, где копать? Я не очень хорошо знаю DIV'ную вёрстку. По инструкции всё сделал, но т.к. сайт «настоящий», 4 блоками тут не обойтись. Естественно, всё не так радужно, как на схемке: хедер, меню, контент, футер.

Help me, please… :)

Link to comment
Share on other sites

8 answers to this question

Recommended Posts

  • 0

Есть у меня на компе справочник по javascript. При просмотре его в IE7 (для других версий IE не знаю) заметил такой казус: вот такой кусочек HTML кода

<td class="H3">Объекты в JavaScript</td>

отображается вот так

clp10.gif

В огнелисе и опере отображение нормальное.

Переделываю код таким макаром

<td><h3 class="H3">Объекты в JavaScript</h3></td>

и получаю следующее отображение

clp11.gif

Может быть это натолкнет вас на решение вашей конкретной проблемы.

Link to comment
Share on other sites

  • 0
а может дело в свойствах элемента h3?

копайте вобщем в сторону свойств css

Вообще-то этот справочник мне неудобств не доставляет, просто, не проанализировав, привел пример, как изменяется отображение при изменении тега. Но потом решил слазить в css. Нашел. Для class="H3" установлен

filter: Blur(и т. д.). Не для элемента td, а для класса (вот так: .H3). И вот лучше бы я туда не лез, так как сейчас появился вопрос: а почему этот фильтр работает для td class="H3" и не работает для h3 class="H3" (отдельно для h3 свойств не имеется).

Edited by barsev
Link to comment
Share on other sites

  • 0
Вообще-то этот справочник мне неудобств не доставляет, просто, не проанализировав, привел пример, как изменяется отображение при изменении тега. Но потом решил слазить в css. Нашел. Для class="H3" установлен

filter: Blur(и т. д.). Не для элемента td, а для класса (вот так: .H3). И вот лучше бы я туда не лез, так как сейчас появился вопрос: а почему этот фильтр работает для td class="H3" и не работает для h3 class="H3" (отдельно для h3 свойств не имеется).

Интуитивно - разные у них position.

TD и H3 очень отличаются по набору дефольтных стилей. Попробуйте поэксперементировать, задавайте этот класс прочим тегам на странице.

Link to comment
Share on other sites

  • 0
а в css записано просто h3 {...} или что-то вроде td h3 {...} или table h3 {...} или еще как-то усложненно?

Вот это HTML и CSS, скопировано из оригинала:

<td align="center" class="H3">Объекты в JavaScript</td>
.H3 {
font-family:sans-serif;
font-size: 20pt;
text-align: center;
color: #269cf7;
filter: Blur(Add=0, Direction=135, Strength=3)
}

И там, кстати, с таким классом есть много тегов <a, содержимое которых отображается без размытия. И всё, господа специалисты, закончим с этим размытием, а то обидится товарищ, открывший эту тему, что я отвлек вас от его проблемы.

В CSS-файле для этого DIV'a прописано следующее:

#wrap { 
height: auto !important;
min-height:100%;
height: 100%;
}

Что-то у меня этот код работает только в IE, а в лисе и опере нет. А вот так

#wrap { 
overflow:hidden;
}

работает во всех трех браузерах. Имею в виду три колонки, левая и правая флоат, контент между ними, все обернуты в div id='wrap' и под ним футер. А насчет шрифта..? Может это просто браузер тупит? Или такое не в одном браузере? Лучше бы посмотреть по ссылочке.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy