Чат сообщества
   | |
| Модератор форума: 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,
Это вы мне писали: Quote <body style="background:url('/img/b.gif') #000000; margin:0px; padding:0px;"> <center><table border="0" cellpadding="5" cellspacing="0" width="95%"> сменить на <body style="background:url('/img/b.gif') #000000; margin:0px; padding:0px;"> <center><table border="0" cellpadding="5" cellspacing="0" width="1024"> <center><table border="0" cellpadding="5" cellspacing="0" width="95%"><tr><td class="bBlok2"> сменить на <center><table border="0" cellpadding="5" cellspacing="0" width="1024"><tr><td class="bBlok2"> и так далее .. много ошибок в шаблоне ... не знаю почему ну во всех модулях (Страница материала и комментариев к нему) сайт не отображается под 1024х768 что делать? |
|
|
|
Miss_Esq, http://dalnoboy-life.ucoz.ru/
|
|
Bumer_2, Вместо 1024 в ( <table border="0" cellpadding="0" cellspacing="0" width="1024"> ) напишите меньше ... 1023 -1020 , просто к ширине прибавялется бордюры и в итоге становится не 1024 а больше ....
|
|
|
|
Bumer_2, У вас в шаблоне страницы 4 таких строки
Напишите сразу 1000px или вообще 900 , видно будет что и как ... Сообщение отредактировал Miss_Esq - Четверг, 29 Дек 2011, 19:27:40
|
|
Quote <center><table border="0" cellpadding="0" cellspacing="0" width="1024"><tr><td class="bBlok5"> $GLOBAL_AHEADER$ </td></tr></table> <center><table border="0" cellpadding="0" cellspacing="0" width="1024"><tr><td class="bBlok2"> <center><table border="0" cellpadding="0" cellspacing="0" width="1024"><tr><td valign="top" align="center"></center> <!-- <middle> --> <table border="0" cellpadding="0" cellspacing="0" width="100%"> <tr> <td valign="top" style="width:205px;"> $GLOBAL_CLEFTER$ Не прописано что ли? Сообщение отредактировал Bumer_2 - Четверг, 29 Дек 2011, 19:52:38
|
|
Bumer_2, У вас одно значение в глобальном блоке верха сайта ...
20:46 всё те же 1024 .... Это у вас какой модуль ? может не в том шаблоне копаете ??? Сообщение отредактировал Miss_Esq - Четверг, 29 Дек 2011, 20:47:57
|
|
Данный вопрос в теме уже озвучивался, парой страниц выше, но ответа на него я не увидела.
К примеру мне нужно подключить различные, частично, css для IE, Opera и GH. Для ИЭ начало строки я тут нашла, <!--[if IE]>, а теперь суть вопроса: как правильно обозначить остальные из вышеперечисленных браузеров? Оперу пробовала и как обычно и всеми заглавными и 1 и 2 буквами, не идет. Может кто-то подскажет как их принято обозначать? И если у нас вот такая строка, то можно ли привязать ее к конкретной версии брауза? <!--[if IE]><link rel="stylesheet" type="text/css" href="/img/ie7.css" /><![endif]--> Сообщение отредактировал Real-san - Четверг, 29 Дек 2011, 22:22:38
|
|
Real-san,
Quote <!--[if IE]><link rel="stylesheet" type="text/css" href="/img/ie7.css" /><![endif]--> Или/и написать метатеги управления режимом в сочетании с Условными операторами <?if($USER_AGENT$='ie' and $USER_AGENT_VER$='8.0')?> <meta http-equiv="X-UA-Compatible" content="IE=8"> <?else?> <?if($USER_AGENT$='ie' and $USER_AGENT_VER$='9.0')?> <meta http-equiv="X-UA-Compatible" content="IE=9"> <?endif?><?endif?> В начале следующего года выйдет IE 10 а вы всё ещё цепляетесь за IE 5 - 6 - 7 . Даже Microsoft через месяц включит принудительный апгрейд этих обозревателей до IE 8 в Windows XP и до IE 9 в Windows 7 .... Quote как правильно обозначить остальные из вышеперечисленных браузеров Сообщение отредактировал Miss_Esq - Четверг, 29 Дек 2011, 23:01:55
|
|
Quote (Miss_Esq) Quote как правильно обозначить остальные из вышеперечисленных браузеров Ни как не обозначите , эти комментарии действуют только с IE , остальные их не понимают вообще .. Ок, тогда как провернуть подобный финт для них? Т.к нужны именно они, не ИЭ, в большей степени опера, версия кстаити 11.60 и всеравно брыкается. А к слову насчет ИЭ, я ведь не сказала какая версия у меня :)) А т.к у ми лиц 7-ка то он уже давно сам до 9 версии обновился :)) Сообщение отредактировал Real-san - Пятница, 30 Дек 2011, 07:35:47
|
|
Real-san,
Quote Ок, тогда как провернуть подобный финт для них? <?if($USER_AGENT$='opera' and $USER_AGENT_VER$='11.6')?> Только всё вы это зря затеваете , если сайт выглядит по разному в зависимости от версий Opera или FireFox или Google Chrome а не по сравнению как отображается в разных типах обозревателей в том числе и IE , то это может говорить о проблемах вётстки , шаблона , скриптов ... Во всяком случае одинакового отображения для Opera , FireFox , Google Chrome и IE 8 - 9 нужно добиваться вёрсткой HTML , а не отдельными метатегами , условными операторами или ещё чем ... Применение костылей для конкретных версий конкретных обозревателей это тупик ... |
| |||
Будьте в курсе всех обновлений: подпишитесь на наш официальный Telegram-канал uCoz и задавайте вопросы в чате сообщества!