Модератор форума: 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
Аморалес
Сообщений: 26
Репутация: 1

Сообщение # 166 | 22:52:35
Сделала дизайн, установила, но в IE он съезжает вниз. В опере нормально. Кто разбирается, посмотрите пожалуйста, можно это как-то исправить?

http://7floor.moy.su
Сообщение отредактировал Аморалес - Вторник, 13 Дек 2011, 23:03:59
Miss_Esq
Сообщений: 13859
Репутация: 4159
Уровень замечаний:

Сообщение # 167 | 00:21:59
Аморалес, Пропимсать Doctype в общих настройках в пункте Значение тега <!DOCTYPE>:

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

Аморалес
Сообщений: 26
Репутация: 1

Сообщение # 168 | 01:44:17
Miss_Esq, Спасибо.

Прописала и стало явно лучше, но все равно наверху скособечено. Реклама криво, сплющило поиск. Можно чем-то ещё вид улучшить?
Сообщение отредактировал Аморалес - Среда, 14 Дек 2011, 01:44:57
Miss_Esq
Сообщений: 13859
Репутация: 4159
Уровень замечаний:

Сообщение # 169 | 02:37:12
Аморалес,
Quote
Можно чем-то ещё вид улучшить
Это уже скорее всего придётся HTML , стили тегов править ....

Аморалес
Сообщений: 26
Репутация: 1

Сообщение # 170 | 03:41:39
Можно хотя бы пару примеров что именно заменять на что? А дальше я уже сама найду в инете. Просто я могу настроить хтмл, как собственно и сделала, но не понимаю как не меняя значений сделать подходящим и для эксплоера. Проще говоря если настрою под эксплоер, то в Опере станет криво...
Miss_Esq
Сообщений: 13859
Репутация: 4159
Уровень замечаний:

Сообщение # 171 | 07:58:37
Аморалес,
Quote
под эксплоер, то в Опере станет криво
smile Нужно писать не под IE или Opera или ещё под какой другой обоззреватель , А ПРОСТО ПИСАТЬ ПРАВИЛЬНО , работаю чисто с IE 9 и в остальных обозревателях , проверяю иногда как выглядит . Абсолютно одинаково ни когда не сделать , хотя бы шрифтом , всё равно отличаться будет , особенно если сравнивать c Opera .... У вас какая версия Internet Expolorer ???

Сообщение отредактировал Miss_Esq - Среда, 14 Дек 2011, 07:59:08
Аморалес
Сообщений: 26
Репутация: 1

Сообщение # 172 | 11:02:01
Седьмая стоит
Miss_Esq
Сообщений: 13859
Репутация: 4159
Уровень замечаний:

Сообщение # 173 | 11:15:18
Аморалес,
Quote
Седьмая стоит
biggrin А восьмую не поставить ? Уже несколько лет как выпущена 8 версия , 9 уже год и три месяца ....
Подстроить адекватно под 7 и остальные обозреватели , если шаблон сложный нереально .

Аморалес
Сообщений: 26
Репутация: 1

Сообщение # 174 | 11:32:08
Нет я могу поставить (хотя мне он нужен только для сверки, что всё норм), а пользователи?) Большие сомнения по этому поводу. Особенно если учесть какие вопросы порой задают. Их политика такова (и они правы) - не пользователь должен подстраиваться, а создатели сайта должны сделать так чтобы люди занимались на сайте тем, за чем пришли, а не настройками своих компов. Другое дело что я валенок и не смогла сделать по-человечески. И хуже всего, что не могу понять где у меня косяк.

Чет как-то пафосно получилось )

______

Добавлено: Кажется меня осенило из-за чего все перекосило. Пойду попробую сделать.
Сообщение отредактировал Аморалес - Среда, 14 Дек 2011, 11:52:21
Miss_Esq
Сообщений: 13859
Репутация: 4159
Уровень замечаний:

Сообщение # 175 | 11:54:44
Аморалес,
Quote
а не настройками своих компов.
Ага щас , пользователю влом поставить нормальную версию Windows XP SP3 или Windows 7 , юзает ту что ещё поставил его дедушка и теперь во всём виноват Админ сайта ???? biggrin

А Opera наверняка у них стоит NEXT 12 , Mozilla FireFox 7 и Google Chrome 13 ..
А как IE так фиг с ним пусть хоть IE 5 , хоть IE 6 , так что ли ?
Пока не заставите сменить версию , так и будут ныть ..

Не хотят идти навстречу стандартам пусть пеняют на себя . Кто живёт прошлым у того нет будущего . Лично мы со своей стороны ни коим образом не поддерживаем IE 5 - 6 - 7 . Не наша проблема , их проблема ....

Аморалес
Сообщений: 26
Репутация: 1

Сообщение # 176 | 12:12:48
Miss_Esq, судя по Вашей позиции почти уверена, что ваш сайт связан с софтом =)) Но в этом случае простительно, у вас контенгент соответствующий, который в силу интересов должен разбираться в таких вещах. А у нас оснавная масса пользователей Ж от 10 до 60. При том большая часть 13-15 и 45+ лет ) То есть понимаете, да? Либо детё, которое ещё не разбирается, либо тётеньки, которые уже никогда и не разбирутся. Моя мама, например, за два года мобильник до конца не освоила, что уж тут о смене и настройке браузера говорить? Там дай бог инфаркт не схватить если обновления вылезли:

- Лия, Лия!!! У меня кажется вирус!!!

______________________

Добавлено: Вроде выровняла. Но ссылки на вход/профиль/рсс немного смещены вверх всё равно. И информер новинок.
Только что залезла в мазилу. Одни эмоции. Всё вверх уползло. Поиск и спрока с входом вообще пропали. Блин, у меня уже голова раскалывается...
Сообщение отредактировал Аморалес - Среда, 14 Дек 2011, 17:05:40
Miss_Esq
Сообщений: 13859
Репутация: 4159
Уровень замечаний:

Сообщение # 177 | 20:32:37
Аморалес,
Quote
То есть понимаете, да?
Отчасти , .... большинство знакомых так же из этой категории , просто чайники . Но тем не менее , под настойчивым давлением с нашей стороны ( устанавлваем только Windows 7 или идите на сторону и платите в три раза дороже за Windows XP ) все уже освоились с W 7 , последний далеко не чайник , сдался в начале года . Отчасти сопротивление сломлено и тем что на работе то у них у всех только Windows 7 .... ok

Quote
настройке браузера говорить
Вы о чём ??? Ни когда ни чего не настраиваю , как есть по умолчанию так и есть .... cool

Quote
Лия, Лия!!! У меня кажется вирус!!!
Лекарство одно , не лазить под красные фонари и не хапать халяву типа " Скачать бесплатно просмотреть и т п и т д " . Как правило вся халява в конце концов обходится намного дороже , в денежном выражении .... biggrin

Quote
что ваш сайт связан с софтом
Глубочайше заблуждаетесь , это избитая и безперспективеная тема . Читайте ЛС ..... smile

Сообщение отредактировал Miss_Esq - Среда, 14 Дек 2011, 20:33:03
dj-vblack
Сообщений: 19
Репутация: 5

Сообщение # 178 | 21:55:40
Quote (Miss_Esq)
Вам нужно разделить код вывода даты и заголовок ... тогда и перенесённые слова начнуться не под датой и отступ от даты будет .. Вставить в шаблон вида материалов...

Miss_Esq, Вы имеете в виду эту дату на картинке???
Прикрепления: 1768351.png (92.5 Kb)

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

Сообщение # 179 | 23:07:48
dj-vblack, Да

В шаблоне написано типа так ...
<div class="publB">$ADD_DATE$ $ENTRY_TITLE$</div>


Переделано так
<div class="publB">
<table style="width: 70%;">
<tr>
<td style="vertical-align: top;">$ADD_DATE$</td>
<td style="padding-left: 15px;">$ENTRY_TITLE$</td>
</tr>
</table>
</div>

Получается так


И всего то ...
Прикрепления: 6397415.jpg (9.3 Kb) · 2397516.jpg (7.7 Kb)

Сообщение отредактировал Miss_Esq - Среда, 14 Дек 2011, 23:26:26
dj-vblack
Сообщений: 19
Репутация: 5

Сообщение # 180 | 00:48:02
Miss_Esq, Уважамая Viktoria,я хочу уточнить,что эту дату я сам лично вписываю в название!!!Она не появляется там автоматически.Вводил коды,что пишите вы!!!Названия вобще пропали...(может что то делаюне так)

black
Сообщение отредактировал dj-vblack - Четверг, 15 Дек 2011, 04:09:24
Поиск:
Telegram
Будьте в курсе всех обновлений: подпишитесь на наш официальный Telegram-канал uCoz и задавайте вопросы в чате сообщества!