Я постоянно слышу, как начинающие дизайнеры жалуются что, когда им
нужно совместить какую-то картинку и фон, то в разных браузерах
выглядет по разному. Многие говорят, что выхода нет. Я тоже так думал и
постоянно создавал javascript, который бы выбирал, какой Background
использовать для разных броузеров.
Я
нашёл выход и теперь не понимаю, как я раньше не догодался! Работает он
с MSIE3, MSIE4, NN3, NC4. Напомню, что 97% юзеров используют один из
них (или два (или три, как я)). Сразу предупреждаю, что я не скажу ни
слова о CSS, так как мой способ работает для всех броузеров, включая
NN3.
Сначала я покажу разницу в том, как работают MSIE и
NETSCAPE с margins, а потом напишу code, который нужно использовать.
Также я полностью уверен, что другого выхода нет!!!
Речь поведу
о третей и четвёртой версиях Нетскейпа. Они обе ничем не отличаются в
плане margins, кроме того, что в четвёртой версии введён тэг <BODY
MARGINWIDTH=# MARGINHEIGHT=#>, подобный тэгу MSIE <BODY
TOPMARGIN=# LEFTMARGIN=#>, который присутствует в третей и четвёртой
версиях MSIE. Разумеется Netscape не захотел просто взять и
использовать такие же имена для параметров, и использовал параметр
когда-то придуманного ими тэга для <FRAME MARGINWIDTH=#
MARGINHEIGHT=#>, о загадочности которого я ещё расскажу.
То
есть можно подвести маленький итог! Используя <BODY MARHINHEIGHT=0
MARGINWIDTH=0 TOPMARGIN=0 LEFTMARGIN=0> в MSIE3, MSIE4 и NC4, можно
абсолютно избавиться от margins.
На этом я мог бы и закончить
свою статью, но вы скажите: "А какже NETSCAPE 3? 40% юзеров его
используют." Так вот именно поэтому я и пишу эту статью.
В чём
главная проблема! Как вы и поняли в NC4 можно контролировать
расположение content'а на страничке. Но! В Нетскейпе 3, увы нельзя. Что
бы вы не делали, у вас всегда будет margin сверху и слева около 5
пикселов. Я точно не знаю сколько. Достаточно много. Единственный
способ от них избавиться, это... использовать фреймы! Да, да, фреймы!
Нужно просто напросто создать два фрэйма:
<FRAMESET ROWS="*,0">
Первый фрэйм - это ваша страничка, а второй пустой. Лучше всего туда положить
<HTML></HTML>
Сделав это, вы мне скажите: "Ни фига.
Всё равно есть граница. Дело в том, что вы забыли, что главный фрэйм
дожен иметь при себе MARGINHEIGHT=0 MARGINWIDTH=0:
<FRAME NAME="home" SRC="home.html" MARGINHEIGHT="0" MARGINWIDTH="0">
Перед тем, как это сделать, проверьте,
чтобы в файле HOME.HTML, не было MARGINGHEIGHT и MARGINWIDTH в таге
BODY. Иначе вы можете испортить совместимость страницы в NN3 и NC4.
Сделав
это, вы заметите проблему. В обоих нетскапах всё выглядит одинаково: вы
увидите границу в один пиксел сверху и слева, но в MSIE границ вообще
не будет. Поэтому, вам надо поставить
<BODY TOPMARGIN=1 LEFTMARGIN=1>
в HOME.HTML. Теперь похоже, что одинаково. Но нужно кое-что доработать. Во-первых во второй фрэйм нужно поставить
<FRAME ... NORESIZE SCROLLING=NO>
А в FRAMESET:
<FRAMESET ROWS="*,0" BORDER=0>
Если не будет BORDER=0, то у вас
появится белая полоска внизу в MSIE. Проблема, которую я не мог
устранить, это белая полоска внизу у NN3 и NC4, даже если есть
BORDER=0. Чего я только не добавлял в <FRAMESET> и <FRAME>.
Я попробовал всё: BORDER=0, FRAMESPACING=0, FRAMEBORDER=0|NO. Если вы
найдёте выход, то напишите мне. Но нас это не должно сильно волновать.
Нам нужно избавлятся от границ. Цвет той полоски, можно поменять в
<BODY BGCOLOR> в пустом файле.
Ну что ж, кажется всё я
сказал. И теперь покажу вам код... О! Забыл. Я забыл рассказать, как я
до сих пор не могу понять загадачность MARGINWIDTH и MARGINHEIGHT в
Нетскапе 3 и 4. Попробуйте сами, и вы упадёте со стула, когда увидите,
как Нетскэйп сам себя обманывает.
Попробуйте убрать в тэге
<FRAME> параметр MARGINHEIGHT=0. И взгляните на страницу в обоих
Нетскэйпах. Верхняя граница вообще исчезнет, а левая останется! Теперь
поставьте обратно и уберите MARGINWIDTH=0. Левая граница исчезнет, а
сверху будет один пиксел! А теперь прикол, уберите оба параметра! Вы
получите ту самую, четырёх-пяти пиксельную границу.
А теперь
попробуйте объяснить мне эту закономерность в Нетскейпе! Теперь надеюсь
вы поняли, что в Нетскапе 3 невозможно избавиться от обеих границ
сразу. Считаю, что самым оптимальным вариантом было бы иметь один
пиксел слева и сверху. И вот для этого код:
INDEX.HTML:
<HTML><HEAD>
<TITLE></TITLE>
</HEAD>
<FRAMESET ROWS="*,0" BORDER=0>
<FRAME NAME="home" SRC="home.html" MARGINHEIGHT="0" MARGINWIDTH="0">
<FRAME NAME="empty" SRC="empty.html" NORESIZE SCROLLING=NO>
</FRAMESET>
</HTML>
HOME.HTML:
<HTML><HEAD>
<TITLE></TITLE>
</HEAD>
<BODY TOPMARGIN=1 LEFTMARGIN=1>
Your stuff
</BODY>
</HTML>
EMPTY.HTML:
<HTML>
<BODY BGCOLOR=#FFFFFF> (в зависимости от цвета в главном фрэйме)
</HTML>
С этим кодом, вы можете смело создавать
BGэшки и совмещать их с contentом на страничке. Выглядить всё будет
одинаково во всех броузерах (97%). Под словом "всё" я подразумеваю
границы.
Единственная проблема - эта та полоска внизу в Нетскапах.
|
Копирование материалов разрешено,