Чат сообщества
   | |
| Модератор форума: 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 |
|
romans,
Quote (romans) Странно, что на моем компе отображается нормально, а на другом всё сплыло вниз, под каркас.... В мозиле серьёзных косяков не вижу. Quote (romans) Кстати, интересно, как он отображается в других браузерах, например Опере и т.л... В Опера - то же более-менее. ... Quote (romans) Странно, что на моем компе отображается нормально, а на другом всё сплыло вниз, под каркас.... Какой браузер, как версия, под гостем или пользователем, какая именно страница, если не главная ... Подробнее.... ... Всё написанное выше - моё личное мнение и на абсолютную правоту не претендует.
Есть вопросы лично ко мне - пиши сюда: http://likbezz.ru/forum/8 |
|
fflesh, ааааа..... вот - в ИЭ 6-й версии сползает, в 8-ой отображается нормально....
....вставил <!--[if IE]><link rel="stylesheet" type="text/css" href="/img/ie7.css" /><![endif]--> <script type="text/javascript" src="/img/global.js"></script> Никаких изменений в ИЭ 6, пробовал изменить /img/ie7.css" вместо "7" на 6, тоже ничего не изменилось... Ламер. Не пинать.
Сообщение отредактировал romans - Среда, 22 Фев 2012, 11:43:42
|
|
romans,
Quote (romans) ааааа..... вот - в ИЭ 6-й версии сползае Тут некоторые говорят, что таких не бывает ))) Вот это в CSS добавьте: Code * html #content{width:720px;} * html #header div.wrapper{width:940px;} * html #header h1{width:940px!important;overflow:hidden;position:relative;padding-bottom:26px;} и все будет путем )  ... Прикрепления:
4481221.png
(43.9 Kb)
Всё написанное выше - моё личное мнение и на абсолютную правоту не претендует.
Есть вопросы лично ко мне - пиши сюда: http://likbezz.ru/forum/8 Сообщение отредактировал fflesh - Среда, 22 Фев 2012, 11:49:16
|
|
Quote (fflesh) Тут некоторые говорят, что таких не бывает ))) ))) это у дочки, вообще она пользуется фаерфоксом, но не удаляю ИЭ6 именно для этих целей-тестировать) Quote (fflesh) Вот это в CSS добавьте: Code * html #content{width:720px;} Извините, а куда именно в CSS это надо впихнуть? Добавлено (22-Фев-2012, 11:57:46) Ламер. Не пинать.
|
|
romans,
Quote это у дочки, вообще она пользуется фаерфоксом, но не удаляю ИЭ6 именно для этих целей-тестировать) Не ориентируйтесь на то как сайт отображается в IE 6 . Эта версия была выпущенна более 10 лет назад , даже раньше чем Windows XP .  И вот это ставить не стоит .. <!--[if IE]><link rel="stylesheet" type="text/css" href="/img/ie7.css" /><![endif]--> Просто обновите IE до версии IE 8 или просто переустановите на Windfows с 8 или 9 ( windows 7 ) версией IE .. Сообщение отредактировал Miss_Esq - Среда, 22 Фев 2012, 12:09:52
|
|
Miss_Esq, Спасибо. Тут дело в том, что пользователи сайта с каких только браузеров не заходят на него...
 (Отслеживаю по статистике), поэтому для меня крайне важно, чтобы он корректно отображался везде..) Добавлено (22-Фев-2012, 12:37:33) --------------------------------------------- fflesh, Miss_Esq, вот, после вставки вот этого кода Quote (fflesh) Вот это в CSS добавьте: Code * html #content{width:720px;} * html #header div.wrapper{width:940px;} * html #header h1{width:940px!important;overflow:hidden;position:relative;padding-bottom:26px;} и все будет путем ) появилась проблема: куда-то делся фон с половины страницы:  ааа, сорри, нашёл косячёк... спасибо еще раз) Ламер. Не пинать.
Сообщение отредактировал romans - Среда, 22 Фев 2012, 12:40:34
|
|
romans,
Quote поэтому для меня крайне важно Пользователи с IE 6 , крайне ленивые и настолько чайники , что ориентироваться на них просто ниже уровня городской канализации ... |
|
romans,
Quote "продвинутые бабульки"  |
|
Проблема c браузером IE, сайты отображаются криво. Сайты: www.ogrstroy.ru и www.novdom53.ru
Текст на страницах и боковые меню съезжают. В других браузерах все корректно. Буду признателен за помощь. www.mobsvjaz.ru
www.prostostudio.ru |
|
SpeedyAlex, Прописать Doctype в Общих настройках сайта в Панели управления ..
|
|
Quote (Miss_Esq) Прописать Doctype в Общих настройках сайта в Панели управления .. А что именно там прописать? www.mobsvjaz.ru
www.prostostudio.ru |
|
Например это
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> Сообщение отредактировал Miss_Esq - Среда, 22 Фев 2012, 20:21:57
|
|
Друзья, помогите.
Есть сайт http://mun-yar.ucoz.ru. Поставил туда другое меню, потому что предыдущее ограничивало заголовки страниц. Теперь наблюдаю следующую картину: 1. На работе захожу с Мозиллы, все норм. Захожу дома - главная страница нормальная, а при переходе на другие страницы меню "едет" и правый столб начинается от самого верха, а не под меню, как на главной. В чем глюк? 2. Как настроить сайт для просмотра в IE, так как там открывается только верх сайта и все. Заранее спасибо! |
| |||