Модератор форума: 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
ildar1512
Сообщений: 10
Репутация: 0

Сообщение # 751 | 14:57:45
Доброго времени суток!)Как сделать участок шапки ссылкой? что то покопался я в CSS и говорят что там нельзя изменить это... так что прошу помощи:) Спасибо большое)
sch779
Сообщений: 703
Репутация: 348

Сообщение # 752 | 22:19:58
Цитата (ildar1512)
Как сделать участок шапки ссылкой?
Смотрите тег <map> - с его помощью можно на любом изображении делать любое количество областей разной геометрии, которые будут работать как ссылки.
ildar1512
Сообщений: 10
Репутация: 0

Сообщение # 753 | 22:24:43
sch779, я знаю этот тэг..но дело в том, что шапка является шаблонной и прописана в стилях... я не могу привязать тэг мап к изображению, просто потому что нет комбинации img src..((вы понимаете же меня?))
ВладЮриэлтМастер
Сообщений: 34
Репутация: 5

Сообщение # 754 | 13:07:17
Цитата (ildar1512)
Доброго времени суток!)Как сделать участок шапки ссылкой? что то покопался я в CSS и говорят что там нельзя изменить это... так что прошу помощи:) Спасибо большое)

Есть другой вариант, добавьте новый стиль в CSS
#logo1 {position:absolute; height: 100px; width:100px; background: url(/empty.png); z-index:100;}
создайте пустое изображение в формате png или gif укажите ссылку на него.
размеры также укажите соответствующие
поиграйте с положением пустой области, чтобы она совпала с желаемой картинкой(ссылкой).
В шаблоне верхней части сайта вставьте
<a href="/"><div id="logo1"></div></a>
Если отдельный стиль logo у вас уже есть, попробуйте просто заключить его в теги ссылки:
<a href="/"><div id="logo"></div></a>

Если не получится - в ссылке под этим сообщением мои контакты, могу сделать сам, условия на моем сайте.

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

Сообщение # 755 | 14:23:45
ВладЮриэлтМастер, Вы почти прочитали мои мысли)) вчера закинул прозрачную картинку и все норм))
спасибо огромнейшее за вариант я буду иметь его в виду!!!))
Miss_Esq
Сообщений: 13859
Репутация: 4159
Уровень замечаний:

Сообщение # 756 | 14:28:58
ildar1512, Вообще то при расположении элемента position:absolute; следует учитывать и куда вы его вставляете, в таблицу или div с relative ... есть ньансы в разных обозревателях, контролируйте как что получается в разных обозревателях ..

jardnepr
Сообщений: 43
Репутация: 19
Уровень замечаний:

Сообщение # 757 | 01:00:28
Подскажите, пожалуйста, что нужно сделать для нормального отображения первой страницы в IE, сайт http://elektor.at.ua/
В мозиле и уране всё the best.

http://hot-kot.at.ua/
sch779
Сообщений: 703
Репутация: 348

Сообщение # 758 | 02:03:37
Цитата (jardnepr)
что нужно сделать для нормального отображения первой страницы в IE
Уберите из стиля для #maincol аттрибут float:left.
А что бы после этого верстка нормально отображалась в остальных браузерах - установите в этом стиле margin-left:210px вместо margin-left:10px.
И, кстати, оформите весь текст в центральном блоке в одном div-элементе - сейчас у Вас каждая строка текста находится в отдельном div-элементе, что полностью сводит "на нет" аттрибут text-align:justify у центрального блока!
Сообщение отредактировал sch779 - Понедельник, 07 Янв 2013, 02:17:18
Zodiaq
Сообщений: 14
Репутация: 10

Сообщение # 759 | 12:02:02
Подскажите, пожалуйста, что нужно сделать для нормального отображения сайта в IE, play-cheat.at.ua

Добавлено (07 Янв 2013, 12:02:02)
---------------------------------------------
http://play-cheat.at.ua/

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

Сообщение # 760 | 12:34:35
Zodiaq, Прописать Doctype в Общих настройках сайта ...

ВладЮриэлтМастер
Сообщений: 34
Репутация: 5

Сообщение # 761 | 12:57:06
Цитата (jardnepr)
Подскажите, пожалуйста, что нужно сделать для нормального отображения первой страницы в IE, сайт http://elektor.at.ua/
В мозиле и уране всё the best.


Достаточно в CSS изменить стиль

с

#maincol
text-align: justify;
margin-top: 10px;
width:580;
float:left;
margin-left:10px;

на

#maincol
text-align: justify;
margin-top: 10px;
width:580;
width=570; /* Этот параметр отвечает за ширину главной колонки только в браузерах IE, комментарий перед вставкой лучше удалить */
float:left;
margin-left:10px;

Здесь могла быть Ваша реклама! ;-)
Miss_Esq
Сообщений: 13859
Репутация: 4159
Уровень замечаний:

Сообщение # 762 | 14:02:42
Мдя ну и бред ...

width=570; /* Этот параметр отвечает за ширину главной колонки только в браузерах IE, комментарий перед вставкой лучше удалить */

ВладЮриэлтМастер
Сообщений: 34
Репутация: 5

Сообщение # 763 | 15:44:17
Цитата (Miss_Esq)
Мдя ну и бред ...

width=570; /* Этот параметр отвечает за ширину главной колонки только в браузерах IE, комментарий перед вставкой лучше удалить */

В смысле бред? Добавление этого параметра решит проблему. Что еще нужно то?

Здесь могла быть Ваша реклама! ;-)
Miss_Esq
Сообщений: 13859
Репутация: 4159
Уровень замечаний:

Сообщение # 764 | 15:52:26
ВладЮриэлтМастер, Добавление для какого то обозревателя чего то дополнительного - это костыли ...
Нужно делать без них ... что бы было для любых обозревателей одно и тоже ...

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

Сообщение # 765 | 20:06:08
У кого есть разные браузеры, помогите проверить сайт на оптимизацию, нет ли багов, а то у меня только хром стоит.
http://vidoc.at.ua
Если не сложно - подскажите, нормально ли будет индексироваться сайт, когда выйдет из карантина. И еще вопрос, нужно ли изменять стандартный robots.txt ?
Поиск:
Telegram
Будьте в курсе всех обновлений: подпишитесь на наш официальный Telegram-канал uCoz и задавайте вопросы в чате сообщества!