| Модератор форума: Yuri_G |
| Сообщество uCoz Мастерская uCoz Дизайн: управление шаблонами Оптимизация дизайна под разные браузеры |
| Оптимизация дизайна под разные браузеры |
|
Зачем нужен "правильный" 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 |
|
Miss_Esq, может Вы подскажете - один из сайтов на стародавнем шаблоне #271.
В принципе все нормально - все межбраузерные баги обхожу вполне удачно. Не один раз пытался перевести его <!DOCTYPE> - сразу же в IE полностью "плывет" весь дизайн. Во всех блоках контент центрируется! Хотя явно центрирование нигде не задано! К примеру, то же меню - смотрю инпектором - ни у самих строк меню, ни у их "родителей" нет явного центрирования! Помогает только если явно задать ячейке (или всей строке) таблицы, в которой находтся блок, левое выравнивание! На всякий случай - адрес сайта: |
|
sch779,
Quote Хотя явно центрирование нигде не задано! Использую <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> и эффекта центровки не наблюдаю .. Может в body бухнуть body {text-align: left; Сообщение отредактировал Miss_Esq - Среда, 29 Авг 2012, 00:18:38
|
|
Quote (Miss_Esq) Какой Doctype прописывали???? Как только ставлю в начало <!DOCTYPE> из Вашего сообщения - сразу все "ломается"! "body {text-align: left;" - не спасает! Просто непонятно - из-за чего такой эффект у IE!? Вроде бы разобрался! В этом шаблоне все поле страницы разбито на три таблицы - заголовок, центральная часть и "подвал". Сама центральная таблица состоит только из одной строки и одной ячейки, в которой и формируются все прочие элементы - боковые блоки и центральная часть между ними. И вот автор этого шаблона вставил в объявление этой головной ячейки аттрибут центрирования! На фига? Если сама эта головная таблица имеет аттрибут width=100% и боковые поля - это уже автоматом центрирует ее содержимое по ширине страницы! Сообщение отредактировал sch779 - Среда, 29 Авг 2012, 01:17:56
|
|
Здравствуйте!
Подскажите пожалуйста, про что думать. Вот сайт: http://5067422.ucoz.ru/ В Хроме, Фоксе, Опере всё в порядке, в ИЕ всё просто ужасно. Но, тот же сайт из-под Aptana в ИЕ выглядит отлично. Понимаю, что есть баги со старыми версиями ИЕ, но в ИЕ 9 должен выглядеть нормально. Шаблон полностью сменён, css тоже свой. Я в тупике. Заранее спасибо за помощь! |
|
PLB, пропишите <!DOCTYPE> в общих настройках ПУ)
|
|
|
|
извините что я сюда пишу,подскажите почему когда через гугал хром за ходишь на сайт там дизайн нормальный,а когда через мазилу за ходишь там диз испорчиный показывают че делать ?
|
|
Ngd, Naruto-Uzumaki, Сначала адрес сайта хотя бы написать ... и Doctype в общих настойках ..
Сообщение отредактировал Miss_Esq - Воскресенье, 07 Окт 2012, 23:14:14
|
|
http://naruto-akatsuki.ucoz.org/ , я просто не могу понять все посмотрел все норма а диз испорчен
|
|
Naruto-Uzumaki, Пропишите Doctype в общих настройках сайт и смотрите потом ..
|
|
ну я прописал,но не чего не изменилась
|
|
Naruto-Uzumaki, Нет у вас Doctype на сайте, не прописали вы его в Общих настройках .. Вы под какое разрешение заточили сайт ??
|
|
Карочь смотри В гугл хроме всё норм http://naruto-akatsuki.ucoz.org/
А в мазиле сайт карявит Добавлено (07-Окт-2012, 23:41:59) |
| |||

Чат сообщества





