Для начала я приведу небольшой
фрагмент из книги Дмитрия Кирсанова "Веб-дизайн"
(с.194), чтобы довести до вас суть проблемы.
Заметки о полях.
Упомянутые только что поля -- это не поля,
которые устанавливает вокруг содержимого
страницы дизайнер, а те небольшие просветы
вдоль левой и верхней границ окна, которые
оставляет сам броузеер. Пользователь не
может ни поместить что-либо в эту мертвую
зону, ни повлиять на размеры полей
средствами стандартного HTML. Еще хуже то,
что величина этих полей непостоянна — она
зависит от марки и версии броузера и от
установленного в данный момент базового
кегля шрифта. Из-за этого возникают
трудности с точным совмещением фонового
изображения и материала переднего плана —
ведь броузер настилает фоновую картинку
по всему пространству окна вплоть до рамки,
вне зависимости от того, насколько
отодвинуты от этой рамки текст и
изображения переднего плана.
Примечание: проведя небольшое
исследование, я составил вот такую табличку
размеров отступов для некоторых браузеров. --
А. В.
| браузер |
Netscape Navigator |
MS Internet Explorer |
Opera |
| платформа |
win32 |
unix |
win32 |
win32 |
| версия |
3.x |
4.x |
3.x |
4.x |
3.x |
4.x |
5.0 |
3.5x |
| отступы |
8px |
8px |
7px |
7px |
10px |
10px |
10px |
10px |
Оговорка относительно "стандартного
HTML" не случайна -- очевидно, поля эти были
введены именно для того, чтобы размеченные
в минималистском, академическом стиле
тексты можно было читать, не стукаясь
взглядом о вплотную прижатую к тексту
рамку окна. Предоставляя со временем все
больше оформительской свободы автору
страницы броузеры не могли обойти своим
вниманием и этот аспект. Так, MSIE
поддерживает атрибуты leftmargin н topmargin тега
BODY, позволяющие устанавливать
любую (в том числе нулевую и отрицательную)
величину полей страницы. Однако и стандарт
HTML 4.0, и броузер Netscape игнорируют эти «MSlE-only»
атрибуты.
Более идеологически
правильный, хотя и выходящий за рамки HTML
подход - использование CSS-свойств margin-left и
margin-top для тега BODY. К сожалению, незрелость
реализации CSS не позволяет
воспользоваться даже таким невинным
трюком: дело в том,
что если MSIE отмеряет поле от рамки окна, то
NC принимает отправную точку то "поле по
умолчанию", которое имеет место в
отсутствие CSS. Поэтому, чтобы прижать
содержимое страницы вплотную к левой
рамке окна, в MSIE достаточно сказать <BODY
style="margin- left: 0рх">, тогда как в NC
вместо 0рх придется подбирать некую
отрицательную величину (около -7рх).
Желание обойтись без CSS
заставляет некоторых дизайнеров
прибегать к еще более замысловатому трюку.
Пользуясь тем, что у тега FRAME есть
поддерживаемые обоими броузерами
атрибуты marginwidth и marginheight, они заключают всю
страницу в единственный фрейм с тем, чтобы
иметь возможность точно устанавливать
величину полей.
А вот теперь давайте разберемся!
Во-первых, нам известен простейший способ
создания одинаковых полей (в том числе
нулевых) для браузеров NN и MSIE начиная с 4-х
версий. Для этого нужно, чтобы тег BODY
выглядел следующим образом:
<BODY LEFTMARGIN="X" TOPMAGIN="Y"
MARGINWIDTH="X" MARGINHEIGHT="Y">
Здесь X - левый отступ, а Y - верхний. Первые
два атрибута понимает только MSIE, вторые два
- только NN. (Opera не понимает ни тот, ни другой)
Но эти чисто визуальные атрибуты элемента
BODY не входят ни в одну официальную
спецификацию HTML, и их использование
противоречит идеологии языка. Куда удобнее
и правильнее было бы использовать CSS, ведь
тогда достаточно иметь одну инструкцию в css-файле
для всего сайта. Я полностью соглашаюсь с
тов. Кирсановым - с помощью свойства magrin
(margin-top, margin-left) невозможно создать
одинаковые поля в обоих браузерах.
Тут есть один тонкий секрет!
Netscape 4.x знает, что такое CSS-позиционирование.
Можно вложить все содержимое страницы в
один общий слой:
<div id="MyBody" style="position:absolute; top:0;
left:0">Содержимое страницы</div>
Но это как-то накладно. А вот если добавить
такой style-атрибут к тегу BODY - результат будет
неожиданный: Explorer и Opera его игнорируют (тут
им подавай margin, а не position!), а Netscape
создает нулевые (в нашем примере) поля.
Остается только привести стили к общему
знаменателю:
<style type="text/css">
body { margin-left:0px; margin-top:0px;
position:absolute; top:0; left:0}
</style>
Похоже, волшебное заклинание найдено!
Все заметки: 1 2
3 4 5
6 7 8
9 11 12
оглавление
www.wmaster.ru
На
главную
СТАТЬИ
ФоруМ
