Модератор форума: 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
ВладЮриэлтМастер
Сообщений: 34
Репутация: 5

Сообщение # 766 | 20:14:03
Цитата (Rums)
У кого есть разные браузеры, помогите проверить сайт на оптимизацию, нет ли багов, а то у меня только хром стоит.
http://vidoc.at.ua
Если не сложно - подскажите, нормально ли будет индексироваться сайт, когда выйдет из карантина. И еще вопрос, нужно ли изменять стандартный robots.txt ?

Тень в районе предполагаемого аватара у гостя не отображается в IE, в нем же и не отображаются закругленные уголки всех элементов. А вообще веб дизайнер должен установить себе хотя бы основные браузеры (FireFox, Chrome, Opera, IE) и проверять все самостроятельно. В инете есть сервисы по проверке кроссбраузерности сайта, там куча людей заходят на сайт и делают скрин экрана потом высылают его. Адрес сайта не помню, нужно искать в поисковиках.

Здесь могла быть Ваша реклама! ;-)
Rums
Сообщений: 10
Репутация: 2

Сообщение # 767 | 20:19:20
ВладЮриэлтМастер, да я не дизайнер - я любитель =)
IE много-требовательный браузер )
Главное что все работает, а тень и уголки это уже мелочи =)
Спасибо за проверку!
ВладЮриэлтМастер
Сообщений: 34
Репутация: 5

Сообщение # 768 | 20:20:36
Цитата (Rums)
Спасибо за проверку!

Рад помочь

Здесь могла быть Ваша реклама! ;-)
Zodiaq
Сообщений: 14
Репутация: 10

Сообщение # 769 | 11:34:59
Цитата (Miss_Esq)
Zodiaq, Прописать Doctype в Общих настройках сайта ...

Но какой ???
Amati5210
Сообщений: 125
Репутация: 16

Сообщение # 770 | 12:33:43
А под какой Doctype Вы сайт создавали? Если без всякого, то как вариант перепробовать основные. Более полная информация ТУТ .

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

Сообщение # 771 | 13:04:36
Zodiaq,

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Amati5210,
Цитата
А под какой Doctype Вы сайт создавали?
Обычно сначала создают неподкакой

Amati5210
Сообщений: 125
Репутация: 16

Сообщение # 772 | 17:55:56
Цитата (Miss_Esq)
Обычно сначала создают неподкакой
+1! Сам так же создавал.

Мой сайт РемДомТех
Zodiaq
Сообщений: 14
Репутация: 10

Сообщение # 773 | 18:07:04
Цитата (Miss_Esq)


СПАСИБО happy

Добавлено (08 Янв 2013, 18:07:04)
---------------------------------------------
Ребят помогите исправить баги
на сайте play-cheat.at.ua

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

Сообщение # 774 | 18:21:29
Zodiaq, А какие проблемы ??

Zodiaq
Сообщений: 14
Репутация: 10

Сообщение # 775 | 18:23:26
Цитата (Miss_Esq)
Zodiaq, А какие проблемы ??

в IE низ сайта сезжает.... на глав странице, а на форуме все норм... И другие если увидете баги и т. д. Буду благодарен если поправите ....
Miss_Esq
Сообщений: 13859
Репутация: 4159
Уровень замечаний:

Сообщение # 776 | 18:27:41
Zodiaq, С какой версией IE смотрите ???

Zodiaq
Сообщений: 14
Репутация: 10

Сообщение # 777 | 22:14:21
Цитата (Miss_Esq)
С какой версией IE смотрите ???

Не вкурсе happy ... А вы не видите багов?
Amati5210
Сообщений: 125
Репутация: 16

Сообщение # 778 | 22:25:32
50 страниц вопросов-ответов, а одно и тоже каждый раз. Zodiaq, такое впечатление что Вы ничего по этой теме не читали.

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

Сообщение # 779 | 09:48:33
Zodiaq, Сдвинут footer на Главной и Каталоге файлов чуть чуть вправо .. Со стороны трудно разобраться что тм у вас не в порядке, оба исходных и форума и главной с каталогом файлов не отличаются практически ни чем .. В Каталоге статей сдвига нет. Кажется ваша проблема возникает именно из за наличия переключателя страниц, точнее сказать при заполнении страницы материалом (В Каталоге статей материалов мало ..). Попробуйте в настройках Новостей и Каталога файлов поставить количество материалов на странице по максимуму. Что бы все материалы этих модулей оказались только на одной странице. Например выбрать по 20 - 30 материалов на страницу..

Сообщение отредактировал Miss_Esq - Среда, 09 Янв 2013, 09:48:59
Zodiaq
Сообщений: 14
Репутация: 10

Сообщение # 780 | 10:21:37
Цитата (Miss_Esq)
Zodiaq, Сдвинут footer на Главной и Каталоге файлов чуть чуть вправо .. Со стороны трудно разобраться что тм у вас не в порядке, оба исходных и форума и главной с каталогом файлов не отличаются практически ни чем .. В Каталоге статей сдвига нет. Кажется ваша проблема возникает именно из за наличия переключателя страниц, точнее сказать при заполнении страницы материалом (В Каталоге статей материалов мало ..). Попробуйте в настройках Новостей и Каталога файлов поставить количество материалов на странице по максимуму. Что бы все материалы этих модулей оказались только на одной странице. Например выбрать по 20 - 30 материалов на страницу..

Ладно и так пойдет ))) Спасибо за помощь!
Поиск:
Telegram
Будьте в курсе всех обновлений: подпишитесь на наш официальный Telegram-канал uCoz и задавайте вопросы в чате сообщества!