Модератор форума: 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
Miss_Esq
Сообщений: 13859
Репутация: 4159
Уровень замечаний:

Сообщение # 316 | 23:45:17
Admin3558, Вот именно ...

Может просто втавить всё в таблицу и забыть ??


Admin3558
Сообщений: 8
Репутация: 0

Сообщение # 317 | 23:52:58
Спасибо за помощь! все таки наверное сменю дизайн как только шапку доделаю, правда на неё пока нет времени.)))
Еще раз спасибо, что уделили мне время и пытались помочь!
Думаю, что еще не раз задам свои вопросы на этом форуме )))
hristianin-usad
Сообщений: 116
Репутация: 739

Сообщение # 318 | 23:18:58
Подскажите пожалуйста у меня в статьях вроде простая ошибка текст вылезает за пределы поля В опере одни вылезают http://otoplenie-santehnika.ru/publ/teplotrassa/1-1-0-9 другие нормально http://otoplenie-santehnika.ru/publ/recirkuljacija_vody/1-1-0-14, а в Хроме и Эксплоэре все вылезают текстом , которые и в Опере и в Мозиле нормальные. Что делать -то .???????????????
Miss_Esq
Сообщений: 13859
Репутация: 4159
Уровень замечаний:

Сообщение # 319 | 23:55:01
hristianin-usad,
Quote
<table x:str="" border="0" cellpadding="0" cellspacing="0" width="543" style="border-collapse: collapse;width:409pt">
Вы же таблицу вбухали ... publ/teplotrassa/1-1-0-9 что в Opera что в IE 9 распирает одинаково ..
А это ... забавно


Я понимаю что изображения можно представлять через тег obect , но не в такой же форме !!!! Неправильно написано ... А почему не через тег img ???

hristianin-usad
Сообщений: 116
Репутация: 739

Сообщение # 320 | 22:42:59
Miss_Esq, таблицу если убрать будет нормально?

Добавлено (22-Янв-2012, 22:42:59)
---------------------------------------------
Но таблица-то нужна она ведь - УНИКАЛЬНЫЙ КОНТЕНТ!!!!!!!!

Floral
Сообщений: 45
Репутация: 4

Сообщение # 321 | 22:43:52
Можно я тут вопрос задам? Если нет, перенесите, куда надо. ТО, что опера иначе показывает и отображает, я уже поняла. А вот что делать с тем, что размеры мониторов разные, и так же показывает по-разному, у меня широкоформатный, а на более мелких коряво отображает. Против этого лома есть прием?
Сообщение отредактировал Floral - Воскресенье, 22 Янв 2012, 22:44:14
hristianin-usad
Сообщений: 116
Репутация: 739

Сообщение # 322 | 23:27:28
Floral, ладно опера у меня хром и эксплоэр тексты в поля задвигают , а на ваши широкоформаты тоже мой сайт не пойми как смотрится http://otoplenie-santehnika.ru/publ/teplotrassa/1-1-0-9

Добавлено (22-Янв-2012, 22:59:19)
---------------------------------------------
Miss_Esq, Убрал таблицу ничего не поменялось

Добавлено (22-Янв-2012, 23:27:28)
---------------------------------------------
УРРРРРРРААААААА ЗАРАБОТАЛО . Обясняю что сделал , теперь во всех в Хроме в Эксплоэре нормально текст и таблица наместе , ну и конечно в опере и в мозиле http://otoplenie-santehnika.ru/publ/teplotrassa/1-1-0-9 Взял все стер со статьи потом текс статьи в ворд и уменьшил поля все скопировал и в визуальный редактор и все никаких наездов , тоже и таблицу уменьшил колонки и опять скопировал и перенес и ВСЕ РОВНЕНЬКО

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

Сообщение # 323 | 23:38:49
hristianin-usad, wacko
Quote
потом текс статьи в ворд
Забудьте о копировании с Ms Word ....

Floral,
Quote
Против этого лома есть прием?
Есть ...

hristianin-usad
Сообщений: 116
Репутация: 739

Сообщение # 324 | 23:42:32
Miss_Esq, Все работает и главное я же коттеджи хочу отапливать , а вэбдизайн на ЮКОЗЕ это хобби

Добавлено (22-Янв-2012, 23:42:32)
---------------------------------------------
biggrin biggrin biggrin biggrin biggrin smile smile smile

Сообщение отредактировал hristianin-usad - Воскресенье, 22 Янв 2012, 23:41:57
webanet
Сообщений: 24067
Репутация: 4985

Сообщение # 325 | 23:43:17
hristianin-usad,
Quote
все скопировал и в визуальный редактор
посмотрите на свои титлы. хотя бы на эту страницу http://otoplenie-santehnika.ru/publ/teplotrassa/1-1-0-9

ТУТ можно оставить своё мнение по любому вопросу
https://webanetlabs.net/
Miss_Esq
Сообщений: 13859
Репутация: 4159
Уровень замечаний:

Сообщение # 326 | 23:50:21
hristianin-usad,
Quote
Все работае и главное
Я бы не сказала что всё гладко ..



Quote
я же коттеджи хочу отапливать
Ассоциативно " кривизна " сайта будет переноситься и на впечатление о надёжности компании представленной на сайте ... wink

Quote
Что делать посоветуете ?
Сменить Ms Office Word на Ms Office SharePoint Designer 2007 .... Вы просто спешите сделать всё , не прорабатывая детали ...
Прикрепления: 3920359.jpg (19.3 Kb) · 7633991.jpg (23.2 Kb)

Сообщение отредактировал Miss_Esq - Воскресенье, 22 Янв 2012, 23:56:18
hristianin-usad
Сообщений: 116
Репутация: 739

Сообщение # 327 | 23:53:40
webanet, НУ И КАК мне статьи писать . Я беру печатаю в визуальном редакторе слово за словом и потом они вылезают за поля 3-и дня никто не мог помочь это исправить вот исделал как мог , ну а коды программа сама прописывает .Что делать посоветуете ?
webanet
Сообщений: 24067
Репутация: 4985

Сообщение # 328 | 23:55:02
hristianin-usad,
Quote
Что делать посоветуете ?
только одно. не пользоваться визуальным редактором. все ваши перекосы на страницах именно по его причине

ТУТ можно оставить своё мнение по любому вопросу
https://webanetlabs.net/
hristianin-usad
Сообщений: 116
Репутация: 739

Сообщение # 329 | 01:11:25
Miss_Esq, СТОП, стоп, стоп БАЛАШИХУ не трогать я только сейчас по теплотрассе понял

Добавлено (22-Янв-2012, 23:56:57)
---------------------------------------------
webanet, А чем пользоваться ХТМЛ?

Добавлено (22-Янв-2012, 23:58:33)
---------------------------------------------
webanet, А как в ХТМЛ статьи писать чтоб во всех броузерах хорошо было видно без ошибок?

Добавлено (23-Янв-2012, 00:25:35)
---------------------------------------------
webanet, КАк вас понял писать статьи кнопкой "Дабавить статью" КАТЕГОРИЧЕСКИ НЕЛЬЗЯ? Я же так и пользовался так и в учебнике по ЮКОЗу стр 131 учат ?

Добавлено (23-Янв-2012, 01:11:25)
---------------------------------------------
webanet, КАк вас понял писать статьи кнопкой "Дабавить статью" КАТЕГОРИЧЕСКИ НЕЛЬЗЯ? Я же так и пользовался так и в учебнике по ЮКОЗу стр 131 учат ?

fflesh
Сообщений: 1784
Репутация: 1314

Сообщение # 330 | 02:52:08
hristianin-usad,
Quote (Miss_Esq)
Забудьте о копировании с Ms Word ....

Есть очень хорошая утилита, аккурат под это дело, называется PureText.
Что она делает?
Очень просто, позволяет вставлять скопированный текст безо всякого форматирования, чем так грешит Word, то бишь - просто текст.
Как она это делает.
Программой назначается комбинация горячих клавиш (можно изменить) по которым и вставляется очиненный текст из буфера обмена.
...

Сам постоянно ей пользуюсь и на работе всем установил - жалоб никаких, быстро, просто и удобно.
Вес проги 28,0 КБ, запускается автоматически, вместе с системой (можно изменить).
...

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

Всё написанное выше - моё личное мнение и на абсолютную правоту не претендует.
Есть вопросы лично ко мне - пиши сюда: http://likbezz.ru/forum/8
Поиск: