проблемы совместимости различных броузеров
 

тов. Vadimmac хотел получить ответы на множество сабжевых вопросов, я думаю, что не он один (и я не исключение).
Так вот: открыл топик в котором пусть каждый, кто хоть что-нибудь знает про совместимость (а именно оптимизацию HTML) скажет свое веское слово - небольшай идея способна серьезно облегчить нашу трудовую жизнь :)

Я, так и быть, первый:

При разработке сайтаюстраницы я, в основном, руководствуюсь некоторыми принципами, но непременно вооружившись всеми необходимыми и дополнительными знаниями. Вот мои принципы:

1) Не использовать сомнительные "технологии" ХТМЛ, такие как:
- слои
- маски
- изменение интерфейса броузера (чрезмерное)
- чрезмерное применение файлов, для просмотра которых требуется "бесплатно скачать необходимый plug-in"
- и тому подобные вещи

Эти принципы позволяют ЗАРАНЕЕ избежать проблем с совместимостью и не тратить много времени на создание сомнительного выпад. меню, например. Если очень надо, то приходиться мучаться - но это уже в исключительных ситуациях.

2) Страница должна хорошо смотреться во всех броузерах (за исключением очень древних).
Это означает, что моя страница должна функционировать под следующими системами и броузерами:

Винды: ИЕ4 и выше, НН4.х и выше, Опера 5 и выше (ниже 4ки под Вин нету)
Маки: какой-у-них-там-сейчас-броузер
Линуксы (и вся компания): Конкерор, Опера4 и выше, НН 4 и выше.

Может быть этот список пополнится, но на данный момент этого хватает на ~99% пользователей.

3) Страница должна быть удобна при разрешении 640х480 до 1600х1200. Многие дизайнеры забывают про 640-юзеров или
просто не могут оптимизировать сайт. Я же решил, что даже если сайт и вылезает за 640 по ширине (очень частые случаи), то пользователю должно быть все равно удобно с ним работать - например на странице меню верт. влева, а текст вправа, так вот этот текст должен полностью укладываться в 640, даже если меню за экраном - ибо пока юзер читает ему меню не нужно.

4) Если код о-оочень долго верстается, выглядит громоздко и портит настроение, то надо искать другой, более легкий, путь решения проблемы, ибо см. мою подпись. Например, ЦИ никак не тыком вычислял координаты для своего эффекта "Стань известным - добавь исходник!". Он придумал некую прогу (как и я потом, когда тоже захотел такое сделать) для получения этих координат, но нам он ее не даст и не покажет (моя прога сделана во Флеше и я тоже не дам ;) ).

5) Если работа не выходит за рамки принципов, то надо подключит все свои (и чужие не помешают) знания, чтобы все доделать и отдать кому надо с чистым сердцем.

Все. Про технологии и знания я расскажу позже.

"сайтаюстраницы" -> "сайта или страницы" :)

Про технологии:

Даже в этом разделе я пользуюсь некоторыми принципами, как то:
- не применяю фреймов (мой сайт не в счет - переделываю)
- не использую хтмл генераторы, как frontpage, dreamweaver, golive, и другие.
- использую минимум графики - страница должна грузиться очень быстро, или не очень, но так, чтобы необходим. информация отображалась сразу.
- всю графику оптимизирую вручную (у гифов палитру руками чищу)
- навигация на сайте должна быть интуитивно понятна
- любая работа не должна иметь ни одного намека на плагиат!

Хочу сказать, что этот список - это не ру/ководство в кратком виде, это действительно опыт создания сайтов (не без помощи ру/ководства, конечно :)

Приемы в хтмл следующие (первое, что пришло на ум):

1) Отступ текста в <P></P>: <img src=trans.gif width=40 height=1>, где trans.gif - это однопиксельный прозрачный гиф.

2) Во избежание 3Д бортика вокруг картинки, пока она грузится в Опере (border=0 не спасет) можно воткнуть ее в background таблицы с размерами картинки, но в саму таблицу необходимо воткнуть trans.gif c определенными (!) width и height, иначе в НН таблица будет размером 1х1, если не хуже.

3) При верстке сраницы я открываю несколько броузеров (Оперу, НН4, НН6, ИЕ) сразу и при изменении кода сразу смотрю, что получилось. Потом не надо искать забытый тег по всему тексту.

Пока в голову ничего не приходит, потом еще добавлю мыслей.

Re: проблемы совместимости различных броузеров
 

Hi !

Ну дизайн молодец :) Даже меня переплюнул (что кстати крайне тяжело) :)
Только такая чрезерность по моему все-таки ни к чему :)
По всем нормам международного права флешовый (подразумевается развлекательный) сайт считается нормальным если он идет в IE4-6/PC и NN4.xx/PC :)
Что захватывает 97% интернетчиков :)

И кстати еще - игнорирование 640х480 тоже вмещается в пределы допустимых трех процентов :)
В декабре такого народа было вроде бы 2.91% :)

но цифра 99 мне больше нравится, а раздраженного sts'a со своим Маком я еще помню, так что Маки в счет.

...что-то дискуссия превращается во флейм, наро-од! где вы все?

Оформительские полноцветные картинки, в которых есть куски фона должны быть гифами. Почему? Потому что только в гифе можно делать прозрачные пиксели - этих кусков фона не должно быть в принципе! Сейчас объясню. Разные броузеры по-разному отображают цвета. Причем отображают неоднозначно. Например в ИЕ фон таблицы/страницы указанный в виде #rrggbb (даже background=somecolor.gif не спасет) выглядит не так, как просто <img src=somecolor.gif>. Это прежде всего относится в оттенкам серого, даже к "безопасным" цветам, типа #cccccc/999999/666666/333333. Поэтому перед экспортом картинки необходимо удалить (сделать прозрачными) все пиксели фонового цвета. Хуже всего отображает цвета ИЕ (сам проверял), на втором месте - ННы (последние версии хорошо показывают). Ну и лучше всех - Опера - ни одного промаха с отображением цветов. Под Маками и Линуксами не тестировал - ИЕ хватило.

Всем участникам Форума: Ау, я один этот топик не вытяну. Нужны ваши идеи!

все это конечно хорошо
 

когда есть время можно, конечно, и палитру почистить ручками в гифке... И теги в нотпаде писать... и все такое.
Однако в реальной жизни бывать да-а-алеко не так :(
Особенно это касается глубинки, а не столицы. Расценки у нас гораздо ниже, а требования - на уровне :)
Ну как же! "А вон у них как! Я, Вась, такую же хочу!"
Вот и получается - Дримваевер, ворованный клип-арт, одинаковые менюшки и верстка, жпеги по 50Кб.

Грусно! Но есть, правда (если есть), отдушина - какой-нибудь личный проект, типа хом пейджа. Вот там можно и палитру руками править и все такое...
:)

именно так и именно в нашей реальной жизни ;)

Статья №4
 

Пока у меня есть целый час до урока испанского я хочу рассказать о ссылках. Да-да, именно о них.

Сначала о поп-апах (pop-up - выпригивающее окошко с рекламой/анкетой - верный признак порносайта).
Когда я делал сайт www.fotogallery.by.ru (работает только под ИЕ, пока :( ) появилась следующая проблема: в несчастном ИЕ при нажатии на ссылку, даже ведущую вникуда (href=javascript:// или href=#), этот броузер останавливал загрузку текущей страницы, а именно превьюшки. Дело обстояло так: пользователь нажимает на картинку и ему в лицо выпригивает фуллскрин с этой фоткой, только большого размера, а все превьюшки, которые должны были спокойно подгружаться (пока человек любуется картинкой), не подгружаются!%@#$ Как с этим бороться? А просто! Надо всего-навсего в конец той функции, которая вызывается так:
<a href=javascript:open("image.jpg");>
или так:
<a href=javascript:// onclick=open("image.jpg");>

вставить return false и ИЕ подавится своим возмущением. (правда на сайте я пока не исправил)

Это был пункт 1, теперь - второй:
Якоря (anchors, ссылки, ведущие на кусок текущей страницы) влекут за собой кучу проблем, даже Лебедев, говоря о location.replace(file.html#anchor) не учел (или учел, но не сказал) того, что разные броузеры - а раз мы говорим о совместимости, то это надо иметь в виду - разные броузеры по-разному ведут на один и тот же кусок документа, а именно:

Допустим, у вас где-то есть якорь, тогда ИЕ прокрутит документ так, что этот якорь будет наверху экрана (см. рисунок), а ННы и Опера прокрутят документ, так, что якорь будет внизу. Кстати, все это относится и к "горизонтальному" сайту. Поэтому я либо использую document.scroll(x,y); - это возможно только при фиксированных размерах страницы, если она не "расплывается" - либо не использую совсем. По моему личному мнению такие важные (с т. зрения эргономики) элементы навигации никак не могут работать по-разному.

Пункт третий относится скорее не к ссылкам, а к оформлению, но все равно не маловажный. Итак, допустим вам приспичило выделить кусок текста подчеркиванием (!). Что же делает пользователь, встретив такой сюрприз? Он протягивает к нему лапку и с удивлением обнаруживает, что курсор не меняется! Он начинает кликать на этот кусок текста и делает, как минимум, 3 щелчка. Лично меня, когда я выступаю в его роли, это ужасно раздражает (у меня мыша оптическая и не тормозит - представьте пользователя со старой шариковой мышой). Так вот надо бороться с этим - выделяйте либо жирностью, либо наклонностью.

В Инет подрубаюсь в-основном на выходных, среди недели в разъездах.. Поэтому молчу

Мной подмечена такая фишка в NN 4.7
Есть две таблица - родительская с одной ячейкой и дочерняя, вложенная в эту ячейку
Background-image, описанный в родительской таблице, повторяется в каждой ячейке дочерней таблицы по умолчанию!!!. Это некрасиво :)
Решение - в каждой ячейке дочерней таблицы вставлять прозрачный gif размерами ячейки:

По поводу общения в этом топике - subway::design начал очень полезную практику.
Статьи с донесением своего опыта превратят этот топик в кладезь бесценной информации.
Давайте решим, в рамках этого топика мы будем задавать и отвечать друг другу на вопросы по вышеуказанной теме(проблемы совместимости различных броузеров)?

Если да, тогда вот вопрос:
Page имеет сложную табличную структуру с применением внешнего файла стилей.
Когда в код в произвольное место вставляется слой с абсолютным позиционированием в НН4.7 стили перестают читаться. Пробовал писать этот слой и тегом <layer> и <span> и <div>.В решении необходимо использовать слой, к сожалению. ИЕ и НН6.0 - все ok. Кто-то сталкивался?

согласен на все 100% :)

Насчет стилей: как я писал выше, я не использую слои, а потому никогда не сталкивался с такими проблемами (видишь, в чем жирный плюс)

Если в каждую ячейку внутренней таблицы вставлять прозрачные гифы таким образом, то нафига сама эта внутр. таблица? Там же текст и остальное не поместятся!

Кроме того, в ИЕ и Опере тоже самое, наследование стилей называется. Что бы изменять бг в отдельных ячейках внутр. таблицы пиши для этих ячеек соответствующий background=xxx.gif

Или я не понял, что ты имеешь в виду? :confused:

http://www.macromedia.com/sitemap/

Оказывается однопиксельный бортик в таблице можно сделать и для НН4.7!!!

Вот как я поступал раньше:
в таблице делал cellspacing=1 bgcolor=#000000, а в других ячейках делал bgcolor=#cccccc, получая таким образом черную рамку в 1 пиксель и смирился с тем, что под ННом №4.7 этой рамки не будет видно :( . Но благодаря Yurail'у (http://www.flasher.ru/forum/showthre...threadid=25824) я выяснил как этого избежать. Так вот втыкаем нужную нам таблицу в другую таблицу и делаем в той ячейке, в которую вложена наша таблица bgcolor=#000000. Вуаля! НН4.7 не показывает бг вложенной таблице там, где нам надо, но сквозь эту дыру просвечивает задняя ячейка материнской таблицы. Ура, ура.

К статье №4 прилагается

мляха-муха, а меня мучает вопрос: "здесь куют хип-хоп?"...шутка...
на самом деле все это конечно очень важно(может быть), но по большему счету ВАЖНЕЙ всего зрелищность, ну и конечно информативность...если со вторым как-то еще можно определиться (просто пообщаться с тем, кому ты лабаешь страницу или перелопатить ту тему которой ты посвящаешь пагу), то со вторым будет посерьезней!!! зрелищность это же и сочетания цветов-типа красный с черным, темно - синий с желтым, белый с зеленым и т.д. и т.п. :D , а так же что-то не очень распространенное-вроде того, что если ты делаешь страницу об электрике, то использование фотографии электромастерской, предметы в которой могут быть менюшками...ВОТ ЭТО наверное важнее, а не то как бы не обидеть 3% (или 2, 97%)!!! Если пага будет по приколу то проценты эти не обламаются!!!! ;)

about offtopic
 

Извини, конечно, но, по-моему, ты несколько не в тему/топик свои мысли выложил. Мне казалось здесь не про стили говорят, а про технологии. И говорят те, кому именно это надо.

PS: Меня не оффтопик возмущает, а мое единоличное засиживание здесь. Я ОЧЕНЬ хочу, чтоб кто-то другой что-нибудь поведал. По теме.

PPS: Или все так секретничают?

Из своего опыта...
 

Для пользователей визуальных редакторов могу посоветовать стирать нафиг все размеры (высоту/ширину) ячеек в пикселях, и избегать их ввода в процентах. Таблица должна сама принимать нужную форму, под действием картинок (в том числе и распорок) и текста, которые в ней лежат. Такой подход лично мне очень помогает.

Кстати, раз уж я поднял тему размеров в процентах - кто нибудь знает как в этом плане укротить Нетскейп?

2 Fenomen
 

ну, не знаю... я всегда указываю пиксели (но не виз. редакторе, конечно), тогда таблица не будет расплываться. А если надо чтоб расплывалася, то тут проценты должны быть. По-моему нельзя компоновку страницы (размеры, и т.п.) доверять броузеру.

А насчет НН, что ты имеешь в виду?

Все дело в том что у тех же FrontPage и DreamWeaver шаловливые ручки на проставление размеров. Я работаю в ДримВаве и без постоянной корректировки кода ничего дельного не получается. Подход, описанный выше, позволяет минимизировать правку всех этих размеров.
Хотя, возможно, что у тех, кто пишет код целиком руками, таких проблем не возникает.

Насчет процентов. Как, скажем, заставить NN сделать таблицу стопроцентной высоты? И еще у меня постоянно возникают проблемы с простановкой процентов ширины ячеек, когда их общая сумма больше 100. IE и NN в таких случаях подгоняют размеры по-разному.

такого вообще не должно быть!!!

height=100%

-----------------------------------

Насчет дрима и прочих: я уже говорил, и буду говорить, что именно из-за несовместимости стиля (программировать) программиста и стиля редактора, а также из-за последствий этой несовместимости ("корректировка кода") я НЕ пользуюсь этими инструментами. А насчет скорости создания страниц, я могу сказать, что руками не намного дольше, зато пага будет ИМЕННО такой, какой ТЫ ее хочешь сделать, а не такой, какой ее хочет сделать редактор. Ну, вы меня поняли, наверное.

Встала проблема задания точных размеров ячеек в таблице. Проблемы были и с ИЕ (чему я сильно удивился), и с НН (чему я совершенно не удивился :) ). Ячейки расплывались как бог на душу положит. задание width и height не спасало. Помогло только создание дополнительной строки и дополнительной колонки в таблице шириной и высотой (соответственно) в один пиксел с прозрачным гифом.
Строка ставится самой первой, столбец - самым левым. Разбиение на ячейки происходит по принципу наибольшей подробности (не знаю как еще сказать). В общем смотрите рисунок, надеюсь все станет понятно.
После этого все стало нормально смотреться и в ИЕ и в НН. Насчет остальных не знаю, не пробовал.

Странно, но мне удается создавать таблицы в DW без постоянного вычищения размеров в коде. Может быть -- у меня руки с не тем радиусом кривизны? :)

А я на тебя посмотрю когда ты будешь верстать резиновую таблицу в 20 колонок и с четвертым уровнем вложенности таблицы :p

А что, в сочетании чисел 20 и 4 есть скрытая магия, сводящаа DW с ума? Числа 15 и 5 не обладают таким эффектом? :)

2 [subway]design: Попробуй сделать height=100% для вложенной в ячейку таблицы и посмотреть в НН.

2 Crazy: А еще если сделаешь сайт в 20 страниц, размером в 4 мегабайта, на него будут заходить 20 посетителей каждые 4 дня и оставлять по 20 записей в гостевой книге в 4 строчки длинной то будет... будет... ничего не будет. Но ты все равно попробуй. :)

2 Fenomen Я еще не ставил задачу зарезинить одну таблицу в другую, но если поставлю, то что-нибудь придумаю; вообще-то я придерживаюсь одного правила (см. подпись)

http://webstar.da.ru/

- o sovmestimosti browserov.

Поток бреда, признаться, ты выдал колоритно. А сказать-то что хотел?

Что если делать такую страницу как у тебя в тут профайле прописанна, то пожалуй можно и обойтись без ручной корректировки кода :) :) :)

Т.е. помимо личных выпадов доводов не осталось?

Crazy, расслабься - никаких выпадов, я просто прикалываюсь.

...................
 

народ, для флуда есть спецраздел. :mad:

hint: search for "флэйм"

http://izvestia.ru/ v Opera6 chitat' ne probovali?

4itaite, shura, 4itaite
 

%subj%!
kirsanov - webdesign - ves'ma interesnaia knigulina... est' eshe webdesign ot kruga i ot nilsena, oni 4ut' pomenee informativnee no tije potianet, a kirsanov - vesh!
antiofftopic: browser vsegda budet staratsia sdelat' tablicu Uzhe, esli ona popitaetsia vilezti za praviy krai, on vashe na4inaet zverstvovat(v plane rezki)...
poishite v nete po kliu4u "optimizaciya tablic browserom"

Можно вопрос по теме?
Должны ли работать в NN 4.7 карты ссылок и background-attachment?
У меня почему-то не работают...

В моем понимании не должны - особенно bg. Хотя мапы вроде должны... просто никогда не задавался целью.

а слабо кодировку на win-1251 переставить???

дароф фсем.

по поводу дублирования бэкграунда в НН... во вложенной таблице в теге table можно просто написать беграунд="" и все... рисунок дублироваться не будет. не обязательно вставлять прозрачный гиф.

помнится я с этим много трахался... помог мне один аштеемельный гуру.

топик хороший.

ща че нить придумаю и напишу сюда.

2 [Subway]design
 

Помнится 15-01-2002 я спрашивал как

Когда в код в произвольное место вставляется слой с абсолютным позиционированием в НН4.7 стили
перестают читаться. Пробовал писать этот слой и тегом <layer> и <span> и <div>.

Проблему решили так:
1.слой описывается в теге
<span id="topic0" name="topic0" style="position:absolute; left:xx; top:xx"></span>

2.обращаемся к нему так
function xxx(){
if (navigator.appName == 'Netscape' && parseInt(navigator.appVersion) == 4){
document.layers["topic0"].left = otstup;
}
else {document.getElementById("topic0").style.left = otstup}
}

Таким образом если NN4.х - обращаемся к нему по "layers[nameLayer]",
в броузерах IE5.x-6.0, NN6.0, Opera6.0(5.0 не смотрел) - работает по "getElementById(nameLayer)"
Стили читаются правильно, слой работает корректно.

Придумали еще довольно простое javascript-ое выпадающее меню - опишу позже


Отдельное спасибо to [Subway]design and Yurail - ваши однопиксельные рамки РУЛЯТ!!!
В дополнение мы использовали background-ом "fon.gif" размерами 4px - на белом фоне две черные точки размерами по 2px, которые расположены как шашечки такси (по диагонали). Понадобится еще однопиксельный прозрачный "trans.gif".
Нарисуйте "fon.gif" и "trans.gif", используйте этот код и вам понравится - есть еще порох в HTMLьницах!!! - рулит в ИЕ, НН, Опере.

<table cellspacing=0 cellpadding=1 border=0>
<tr><td bgcolor=white background="1.gif">
<table background="trans.gif" bgcolor=white width=400 height=200 cellspacing=0 cellpadding=0 border=0>
<tr><td><br>&nbsp;<br>
</td></tr>
</table>
</td></tr>
</table>

Если смотрю эту картинку в NN 4.75, то вижу дырку... Почему?
[IMG]C:\Documents and Settings\kornev_pa.SARNPZ\Мои документы\Отдел менеджмента качества\Site New\Unused pictures\zzz.png[/IMG]

Доброе время суток!
У меня например была след.кющая очень интересная проблема совместимости:
Нужно было написать динамическую менбшку на Флеше а-ля виндовая (вся инфа бралась из ХМЛ-я)... Я поднатужился, создал объекты и в итоге - у меня на машине в 6-м експлохере все работает - у соседа (конфигурация компа вплоть до хардваре такая-же) не работает :) Пошли дальше по офису проверили еще на 2-х компах - у одного работает у другого нет... (не работает т.е. ВСЕ менюшки - видны как будто уже выехали)... в общем я поплакал и сделал без объектов... все заработало... В последствии еще несколько раз натыкался на уродскую реализацию объектов во флеше. казалось бы плюс-минус одна строчка, а флеша из-за нее без предупреждения вылетает... вот и пиши теперь нормальный код... Буду ждать 7-й Флеши, может хоть там получше с объектами....