WebClub - Всероссийский Клуб Веб-разработчиков
WebClub.RU » Архив » Как совместить пиксел к пикселу фон и содержимое во всех браузерах

Как совместить пиксел к пикселу фон и содержимое во всех браузерах


Дата публикации: 16-03-2013

Я постоянно слышу, как начинающие дизайнеры жалуются, что, когда им нужно совместить какую-то картинку и фон, то в разных браузерах выглядит по разному. Многие говорят, что выхода нет. Я тоже так думал и постоянно создавал 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%). Под словом "всё" я подразумеваю границы.

Единственная проблема - эта та полоска внизу в Нетскапах.

Популярное

Не так давно в сети появился новый сервис, под названием Dead Man Zero. Этот сервис сделал...
Рынок социальных площадок уже давно стал стабильным. Несмотря на то, что время от времени...
Artisteer 4 – единственный в своем роде продукт, позволяющий автоматизировать работу над созданием...
Март 2017 (1)
Февраль 2017 (3)
Январь 2017 (1)
Август 2016 (1)
Май 2016 (2)
Ноябрь 2015 (1)

Карта сайта: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41

Друзья сайта

Хотите продать свой сайт?
- Мы быстро и удобно для Вас сможем его купить:
  • Заявка на продажу сайта
  • Раcсматриваем цены на каждый сайт в индивидуальном порядке.

    Случайная цитата

    Pixadel:

    "Хорошо, Java, ВОЗМОЖНО, хороший пример того как должен выглядеть язык. Но тогда программы на Java — это хороший пример как НЕЛЬЗЯ писать программы."

    Опрос

    Какими социальными сетями Вы пользуетесь?

    Vkontakte.ru
    Одноклассники
    Мой Мир - mail.ru
    Google Plus
    Facebook
    ЖЖ
    Другие
    Не пользуюсь