Модератор форума: Yuri_G  
Сообщество uCoz » Мастерская uCoz » Дизайн: управление шаблонами » Оптимизация дизайна под разные браузеры
Оптимизация дизайна под разные браузеры
Модератор форума
Сообщение # 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
fflesh
Сообщений: 1784
Репутация: 1314

Сообщение # 466 | 01:27:49
j-63, читай личку
...

Всё написанное выше - моё личное мнение и на абсолютную правоту не претендует.
Есть вопросы лично ко мне - пиши сюда: http://likbezz.ru/forum/8
Сообщение отредактировал fflesh - Суббота, 24 Мар 2012, 01:39:13
j-63
Сообщений: 35
Репутация: 2

Сообщение # 467 | 01:32:39
Спасибо!
Quote (fflesh)
Ну, если бы твой сайт города Гагарин ... искал бы ты и дальше ...

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

Сообщение # 468 | 07:03:36
j-63,
Quote
что делать?
Обновить версию IE 6 до IE 8 , иного решения нет ...

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

Сообщение # 469 | 18:25:49
Здравствуйте, решил уделить время своему сайту, сделать код полностью валидным.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Вот в чем проблема, в конструкторе шаблонов код выглядит так:
Code
<link type="text/css" rel="StyleSheet" href="[CSS_URL]">


Установил я этот шаблон, ucoz силовым методом закрыл тег, как в xhtml. Почему?
olegsuv
Сообщений: 1365
Репутация: 127

Сообщение # 470 | 18:35:26
Quote (_dark13f_)
Здравствуйте, решил уделить время своему сайту, сделать код полностью валидным. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Вы опоздали минимум на 10 месяцев с этим biggrin
Сейчас html5 а не 4.01

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

Сообщение # 471 | 18:36:51
Посмотрел я свой сайт, все время удивлялся, почему в валидаторе head и body как ошибка выдается. Реклама укоза начинается до тега html, а после закрытия html есть какой-то div с номером сервера, на котором расположен сайт. Как это убрать? sad Я что-то намудрил, может код важный укозовский упустил.
olegsuv
Сообщений: 1365
Репутация: 127

Сообщение # 472 | 18:37:59
_dark13f_, рекламу за деньги, див с сервером - никак

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

Сообщение # 473 | 18:40:01
Ну, не знаю, html 5, старые браузеры не понимают. Хотя не проверял.
olegsuv
Сообщений: 1365
Репутация: 127

Сообщение # 474 | 18:41:32
Quote (_dark13f_)
html 5, старые браузеры не понимают


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

Сообщение # 475 | 18:54:10
Спасибо, почитал про html 5, до этого как-то не обращал внимания. Перейду на html 5.
webanet
Сообщений: 24067
Репутация: 4985

Сообщение # 476 | 14:36:39
тема очищена от флуда. все кто не нашел свои сообщения или не до конца высказался - найти сообщения и продолжить беседу можно в этой теме //forum.ucoz.ru/forum/31-39343-1

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

Сообщение # 477 | 13:34:20
Господа хелп плиз. В ИЕ слайдер липнет к левому краю. Как сделать чтобы стоял посередке страницы, в опере и хроме все нармуль. ссылка

tempora mutantus et nos mutamur in illis
Miss_Esq
Сообщений: 13859
Репутация: 4159
Уровень замечаний:

Сообщение # 478 | 14:17:57
lucks, Для начала прописать Doctype в общих настройках сайта

lucks
Сообщений: 15
Репутация: 3
Уровень замечаний:

Сообщение # 479 | 17:49:25
Miss_Esq, благодарю, совсем забыл.

tempora mutantus et nos mutamur in illis
Сообщение отредактировал lucks - Вторник, 03 Апр 2012, 17:53:53
true3071
Сообщений: 435
Репутация: 71
Уровень замечаний:

Сообщение # 480 | 18:00:23
тебе нужно просто прописать одно кроссбраузерное тело

и добавлять уже все туда

здесь пример

я долго не мог понять как Лубс сделал его кроссбраузерным

особенно параллакс

потом дошло

http://uvaforum.ucoz.ru/uvaforum/uvaforum_main.html

Добавлено (03-Апр-2012, 18:00:23)
---------------------------------------------
причем хотя все и по GPL

но он поставил туда кучу защиты от установки

вроде нате копируйте

потом сам у меня зарегистрировался

но я неделю

перепахивал код стыкуя с юкозом

и в первую очередь кроссбраузерность

Сообщество uCoz » Мастерская uCoz » Дизайн: управление шаблонами » Оптимизация дизайна под разные браузеры
Поиск: