Модератор форума: Yuri_G  
Оптимизация дизайна под разные браузеры
Модератор форума
Сообщение # 1 | 22:12:11
Зачем нужен "правильный" HTML-код?

HTML - это специальный язык разметки для веб-страниц. Этот язык стандартизован. Значения каждого тега строго определены. Каждый тег имеет определенные атрибуты. HTML-код страницы интерпретируется браузерами и переводится в изображение веб-страницы, которое видит пользователь.

Теперь представьте, что HTML код страницы содержит ошибки (не соответствует стандарту). Что в этом случае делать браузеру?

Самый простой вариант - это вывести на экран сообщение об ошибке и все. Однако пользователь вряд ли будет рад увидеть вместо страницы, на которой пропущен закрывающийся тег, сообщение об ошибке. Поэтому создатели браузеров пошли другим путем. Браузеры пытаются (в меру своей интеллектуальности) "исправить" некорректный HTML-код.

Вот тут и кроется проблема. Каждый браузер имеет свои правила, по которым он будет исправлять HTML ошибки на веб-страницах. Поэтому, если на странице есть ошибки, то существует большая вероятность, что данная страница в разных браузерах будет выглядеть по-разному. Более того, если даже он сейчас выглядит одинаково во всех браузерах, это не значит, что так будет всегда. С выходом новой версии какого-либо браузера коррекция HTML ошибок может быть изменена. А вот следование стандартам изменено вряд ли будет.

Если вы хотите, чтобы ваш сайт выглядел одинаково в самых популярных браузерах, постарайтесь избежать ошибок в HTML коде.

В общем, бывает когда есть сайт, есть дизайн, но вот проблема - неизвестно, как он выглядит на других браузерах. Те, кто попроще, просто отписываются, что проверил на таком-то браузере, на других - не знаю.

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

Проблема с отображением тега HR

Советую вместо
Code
<hr>

который красиво может выглядить только в ИЕ использовать цветную однопиксельную картинку:
Code
<img src="путь до картинки/hr.gif" class="hr">

и прописать ее в стилях:
Code
.hr {height: 1px; width: 100%; margin-top: 5px; margin-bottom: 5px;}

© Andre

Разное понимание CSS браузреами типа IE и Opera (там же Mozilla и прочие)

Проблема в следующем: ИЕ и Опера по разному принимают стили и пересчитывают ее на свой лад. Так расстояние между тегами H1 и P разное и поэтому текст по разному смотрится. Для решения этой проблемы надо использовать дополнительную таблицу стилей под IE, поставить там в ручную padding и margin, или другие атрибуты (в зависиости от ситуации) и прописать ссылку в html, заключив ее в специальные теги.

Code
<html>
<head>
<title>Максим Пелевин - Главная страница</title>
<link href="http://maxpelevin.3dn.ru/_st/my.css" rel="StyleSheet" type="text/css">
                  <!--[if IE]><link rel="stylesheet" type="text/css" href="/img/ie7.css" /><![endif]-->
<script type="text/javascript" src="/img/global.js"></script>
</head>

Надеюсь понятно объяснил.

© Русак

Решаем проблему с прозрачностью картинок PNG в ИЕ: http://www.tigir.com/alpha_png.htm
SpeedyAlex
Сообщений: 15
Репутация: 3

Сообщение # 421 | 23:43:58
Информация на страницах размещается внизу, а не как нужно сбоку.
Прикрепления: 5833889.jpg (101.4 Kb) · 7574099.jpg (106.5 Kb)

www.mobsvjaz.ru
www.prostostudio.ru
SpeedyAlex
Сообщений: 15
Репутация: 3

Сообщение # 422 | 23:45:39
Должно быть вот так
Прикрепления: 4142591.jpg (130.7 Kb)

www.mobsvjaz.ru
www.prostostudio.ru
Miss_Esq
Сообщений: 13859
Репутация: 4159
Уровень замечаний:

Сообщение # 423 | 23:49:50
SpeedyAlex, wink с вами всё ясно .. смените обозреватель ... поставьте IE 8 как минимум ... подгонять сайт под IE 5 - 6 не имеет смысла ..

SpeedyAlex
Сообщений: 15
Репутация: 3

Сообщение # 424 | 23:51:16
Quote (Miss_Esq)
с вами всё ясно .. смените обозреватель ... поставьте IE 8 как минимум ... подгонять сайт под IE 5 - 6 не имеет смысла ..


Т.е. дело просто в старой версии IE?

www.mobsvjaz.ru
www.prostostudio.ru
Miss_Esq
Сообщений: 13859
Репутация: 4159
Уровень замечаний:

Сообщение # 425 | 23:58:01
SpeedyAlex, Вот именно только в этом , старые версии не будут нормально отображать сайт даже с Doctype ... Обновите IE просто ..

SpeedyAlex
Сообщений: 15
Репутация: 3

Сообщение # 426 | 23:59:32
Quote (Miss_Esq)
Вот именно только в этом , старые версии не будут нормально отображать сайт даже с Doctype ... Обновите IE просто ..


Спасибо. Попробую.

Еще вопрос, а почему другие сайты на Ucoz в старой версии отображаются нормально?

www.mobsvjaz.ru
www.prostostudio.ru
Miss_Esq
Сообщений: 13859
Репутация: 4159
Уровень замечаний:

Сообщение # 427 | 00:02:22
SpeedyAlex, Это зависит от шаблона страницы , если бы было сделано на таблицах такого бы не было .. Такое получается при чисто div вёрстке ...

SpeedyAlex
Сообщений: 15
Репутация: 3

Сообщение # 428 | 00:09:17
Quote (Miss_Esq)
Это зависит от шаблона страницы , если бы было сделано на таблицах такого бы не было .. Такое получается при чисто div вёрстке ...


Понятно. Спасибо.

www.mobsvjaz.ru
www.prostostudio.ru
olegsuv
Сообщений: 1365
Репутация: 127

Сообщение # 429 | 01:27:56
Quote (SpeedyAlex)
ще вопрос, а почему другие сайты на Ucoz в старой версии отображаются нормально?

Потому их писали еще в каменном веке каменным способом, поэтмоу и отображаются в страхы браузерах.

Любые работы по:
- Javascript, jQuery, HTML, CSS
- Верстке макетов и установке их на сайты
- Нестандартным решениям
sch779
Сообщений: 703
Репутация: 348

Сообщение # 430 | 02:02:29
И, кстати, в некоторых шаблонах явная "прописка" Doctype полностью портит верстку!
По крайней мере, в шаблоне #271.
Так что, увы, Doctype иногда делает все наоборот.
Правда, я на этом дизайне и без Doctype делаю кроссбраузерный дизайн (практически любой) - и, кстати, совершенно, без хаков или отдельного кода для разных браузеров.
Miss_Esq
Сообщений: 13859
Репутация: 4159
Уровень замечаний:

Сообщение # 431 | 06:51:41
sch779,
Quote
Так что, увы, Doctype иногда делает все наоборот.
Это свидетельствует только о том что шаблон этого дизайна " кривоват " , мягко говоря ...

Сообщение отредактировал Miss_Esq - Пятница, 24 Фев 2012, 06:52:05
fflesh
Сообщений: 1784
Репутация: 1314

Сообщение # 432 | 09:03:35
sch779,
Quote (sch779)
Так что, увы, Doctype иногда делает все наоборот.

Наоборот делают кривые руки создателя шаблона.

Quote (sch779)
И, кстати, в некоторых шаблонах явная "прописка" Doctype полностью портит верстку!

Просто некоторые шаблоны свёрстаны, мягко говоря, по дилетантски.
...
Quote (sch779)
Правда, я на этом дизайне и без Doctype делаю кроссбраузерный дизайн (практически любой)

Про “практически любой”, так это настолько растяжимое понятие, что можно было бы и не писать ) ...
...
Сделай без хаков три колонки (Σ = width 100%), контен сверху, у боковых - фоновая картинка (по высоте) у центральной - бордер.
...

Всё написанное выше - моё личное мнение и на абсолютную правоту не претендует.
Есть вопросы лично ко мне - пиши сюда: http://likbezz.ru/forum/8
Сообщение отредактировал fflesh - Пятница, 24 Фев 2012, 09:19:12
juicypussy
Сообщений: 8
Репутация: 6

Сообщение # 433 | 16:45:16
Quote (rusak)
Проблема с отображением тега HR

Советую вместо
Code
<hr>


который красиво может выглядить только в ИЕ использовать цветную однопиксельную картинку:
Code
<img src="путь до картинки/hr.gif" class="hr">


Если речь идёт об оптимизации, то не вижу смысла менять <hr> на картинку и объясню почему.

При загрузке страницы, браузеры должны скачать содержимое и потом уже выдать это в задуманном виде, но с каждой новой картинкой, страницы будут открываться всё медленнее и медленнее. Это не из-за того, что картинка большая, а из-за того, что браузеру придётся выполнять на 1 http запрос больше - помимо правильности html кода и css, надо в первую очередь создавать страницы оптимизированные на практике, потому что я вам могу написать код на 150kb (именно html) и страница будет загружаться за 2 сек., в то же время, можно написать страницу и на 4kb, при загрузке которой будут использоваться 10 бесполезных javascript'ов (как многие новички любят напичкивать свой сайт) 3 листа css по правилам которых будет загружено ещё 30 картинок. Такая страница будет грузится не 2, а 15 секунд. Ещё хуже если они не кэшируются (а на ucoz'е с этим проблема есть), потому что после каждого перезапуска браузера, эти картинки надо будет загружать по новой...

Ещё один момент: во многом может помочь использование css спрайтов, то есть использование одной картинки вместо большего кол-ва часто используемых, при этом задавая элементам классы, которые будут выводить на экран часть этой картинки, а не всю полностью что конечно не имело бы смысла. Если это кого-то интересует, обещаю написать статью об этом... Дайте знать...

P.S. Я конечно полагаю, что это просто ошибка по невнимательности, rusak, но раз уж ты пишешь о правильности html кода, не забывай добавлять элемент alt="" (ой пардон, мне весьма справедливо fflesh посоветовал исправить слово элемент на атрибут... слово не воробей, просто дописываю, что он как бы прав... biggrin ) к картинкам tongue

как только модеры проверят мою статью, читайте о CSS спрайтах на http://manual.ucoz.net/board/25-1-0-414 (если понравится, поддержите своим голосом)
Сообщение отредактировал juicypussy - Пятница, 24 Фев 2012, 17:10:15
fflesh
Сообщений: 1784
Репутация: 1314

Сообщение # 434 | 16:52:03
juicypussy,
Quote (juicypussy)
Если это кого-то интересует, обещаю написать статью об этом... Дайте знать...

Вот, мудрое решение.
Напиши.
Написать можно вот тут: Инструкции для uCoz ...
...

И если мы говорим о “правильности”, давайте называть вещи своими именами ))))
«alt» - это не элемент, это атрибут )
- полагаю, что это тоже произошло по “невнимательности” автора )
...

Quote (juicypussy)
а как эти штуки называются - не имею понятия в 99% случаев

По вашему «alt» - это “штука” )))) lol Да, неплохо)
Хорош прикалываться - просто исправь )

juicypussy,
Не рекомендуется использовать активные GIF-ы на данном форуме...
...

Всё написанное выше - моё личное мнение и на абсолютную правоту не претендует.
Есть вопросы лично ко мне - пиши сюда: http://likbezz.ru/forum/8
Сообщение отредактировал fflesh - Пятница, 24 Фев 2012, 17:05:31
juicypussy
Сообщений: 8
Репутация: 6

Сообщение # 435 | 17:00:41
Quote (fflesh)
И если мы говорим о “правильности”, давайте называть вещи своими именами ))))
«alt» - это не элемент, это атрибут )
- полагаю, что это тоже произошло по “невнимательности” автора )


нет, должен тебя разочаровать! потому что не по невнимательности, а просто потому что я так называю всё... biggrin если бы меня попросили посмотреть код страницы и исправить в нём ошибки, то я бы это сделал быстрее, чем если бы меня попросили рассказать об ошибках и помочь их исправить... я просто знаю что куда вписывать, а как эти штуки называются - не имею понятия в 99% случаев wacko это будет большой проблемой при написании статьи о спрайтах... ну ниче, буду пробовать cool

Quote (fflesh)
juicypussy,
Не рекомендуется использовать активные GIF-ы на данном форуме...


Не рекомендуется или совсем запрещено?

как только модеры проверят мою статью, читайте о CSS спрайтах на http://manual.ucoz.net/board/25-1-0-414 (если понравится, поддержите своим голосом)
Сообщение отредактировал juicypussy - Пятница, 24 Фев 2012, 17:06:05
Поиск: