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

Сообщение # 406 | 22:21:46
Turkov,
Quote (Turkov)
Друзья, помогите.
Есть сайт http://mun-yar.ucoz.ru. Поставил туда другое меню, потому что предыдущее ограничивало заголовки страниц. Теперь наблюдаю следующую картину:

У вас где-то ошибка в шаблоне (шаблонах) - закрыта или не открыта ячейка.
При таком огромном кол-ве кода, сложно разобраться.
... А может, по тому что вы вхнули в шапку данные из Word′а - со всеми вытекающими ...
..
Вот это:
Quote
<!-- </middle> --></td>
</tr>
</table>
</td>

<td valign="top" class="column">

лишнее - оно и портит разметку... Уберите выделенное ... будет лучше )


....
Прикрепления: 2036747.png (7.9 Kb)

Всё написанное выше - моё личное мнение и на абсолютную правоту не претендует.
Есть вопросы лично ко мне - пиши сюда: http://likbezz.ru/forum/8
Сообщение отредактировал fflesh - Среда, 22 Фев 2012, 22:24:59
Turkov
Сообщений: 5
Репутация: 2

Сообщение # 407 | 22:40:08
А где исправить? Какой путь?

Добавлено (22-Фев-2012, 22:40:08)
---------------------------------------------

Quote (fflesh)
лишнее - оно и портит разметку... Уберите выделенное ... будет лучше )

А где это найти? Какой путь?
fflesh
Сообщений: 1784
Репутация: 1314

Сообщение # 408 | 23:33:27
Turkov,
Quote (Turkov)
А где это найти? Какой путь?

В шаблоне «Страницы сайта»
...
Quote (Turkov)
Какой путь?

ПУ » Управление дизайном » Редактирование шаблонов - выбираем нужный и ищем. Внимательно и аккуратно.
... Сначала делаем бекап шаблонов, естественно. Там же, » Резервная копия шаблонов » ... создаём.

Всё написанное выше - моё личное мнение и на абсолютную правоту не претендует.
Есть вопросы лично ко мне - пиши сюда: http://likbezz.ru/forum/8
SpeedyAlex
Сообщений: 15
Репутация: 3

Сообщение # 409 | 03:30:47
Quote (Miss_Esq)
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">


Без результата

www.mobsvjaz.ru
www.prostostudio.ru
olegsuv
Сообщений: 1365
Репутация: 127

Сообщение # 410 | 04:39:51
Quote (SpeedyAlex)
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Что вы в 1999 году забыли?
Code
<!DOCTYPE html>

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

Сообщение # 411 | 07:35:24
mob_dp2,
Quote (mob_dp2)
<!DOCTYPE html>

Какая разница )
У человека проблема с ИЕ ) а не с доктайпом ))))
...

Всё написанное выше - моё личное мнение и на абсолютную правоту не претендует.
Есть вопросы лично ко мне - пиши сюда: http://likbezz.ru/forum/8
Miss_Esq
Сообщений: 13859
Репутация: 4159
Уровень замечаний:

Сообщение # 412 | 09:15:15
fflesh,
Quote
У человека проблема с ИЕ ) а не с доктайпом ))))
Большая разница facepalm , была проблема с отображением в IE , прибавится проблема с валидностью .. haha

mob_dp2,
Quote
Что вы в 1999 году забыли?

facepalm

SpeedyAlex
Сообщений: 15
Репутация: 3

Сообщение # 413 | 22:49:32
Quote (SpeedyAlex)
Проблема c браузером IE, сайты отображаются криво. Сайты: www.ogrstroy.ru и www.novdom53.ru

Текст на страницах и боковые меню съезжают. В других браузерах все корректно. Буду признателен за помощь.


Quote (mob_dp2)
<!DOCTYPE html>


Ситуация не поменялась. Подскажите какие еще есть варианты?

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

Сообщение # 414 | 22:53:39
SpeedyAlex,
Quote
Без результата
И куда же вы прописали Doctype если у вас его не наблюдается в исходном тексте ????
Quote
Ситуация не поменялась. Подскажите какие еще есть варианты?

Только прописать Doctype и смотреть дальше что у вас там ...

Сообщение отредактировал Miss_Esq - Четверг, 23 Фев 2012, 22:55:08
SpeedyAlex
Сообщений: 15
Репутация: 3

Сообщение # 415 | 23:14:47
Quote (Miss_Esq)
И куда же вы прописали Doctype если у вас его не наблюдается в исходном тексте ????


Я внес <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> в общих настройках (сайт www.ogrstroy.ru) и сохранил. Где еще необходимо внести?

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

Сообщение # 416 | 23:17:20
SpeedyAlex, Сейчас напишите и посмотрим ..

SpeedyAlex
Сообщений: 15
Репутация: 3

Сообщение # 417 | 23:18:44
Quote (Miss_Esq)
Сейчас напишите и посмотрим ..

Прописан..

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

Сообщение # 418 | 23:34:04
SpeedyAlex, На сайте novdom53.ru Doctype не прописан ...
Как ставите , пошагово , где ???

SpeedyAlex
Сообщений: 15
Репутация: 3

Сообщение # 419 | 23:36:55
Quote (Miss_Esq)
Как ставите , пошагово , где ???


Сейчас работаю с сайтом www.ogrstroy.ru. В панеле управления, общие настройки, Значение тега <!DOCTYPE>:. Прописываю в окне: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">. Сохраняю. Это все, что я сделал.

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

Сообщение # 420 | 23:41:39
SpeedyAlex, И что не так ?? Сайт в IE отображается нормально .. какие там у вас " косяки " с вашей точки зрения ????

Сообщение отредактировал Miss_Esq - Четверг, 23 Фев 2012, 23:42:05
Поиск: