Чат сообщества
   | |
| Модератор форума: 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 |
|
В Google Chrome все норм, при уменьшении размера сайта в краях, а IE тупит. Что можно сделать? Для наглядности Скриншот и код CSS для сужения
http://rghost.ru/23442901.view http://rghost.ru/23443111.view Внизу появляется прокрутка в IE Доступно только для пользователей Сообщение отредактировал Striker1997 - Среда, 28 Сен 2011, 22:35:37
|
|
|
|
На сайте guitar-muzon.ru IE 9 не показывает название сайта, как исправить?
И еще, кнопка "Нерабочая ссылка" и виджет соц.закладок на странице материала съезжают вниз на несколько строк, эта проблема во всех боаузерах, как сделать, что бы они были прямо под ним? Кроме того в IE9 появляется какая то кнопка"Подача запроса", при нажатии открывается окно добавления материала. |
|
Miss_Esq, ну допустим этот сайт во всю ширину экрана, а мне нужно чтобы не во всю. А IE тупит как исправить?
|
|
Striker1997,
Quote А IE тупит как исправить? Quote а мне нужно чтобы не во всю |
|
Miss_Esq, объясни где это писать пожалуйста. IE самый последний. Страницы делал через CSS margin-left 15% right 15%, в посте на 5стр все есть. Где doctupe писать и полный тег
|
|
Miss_Esq, nightflyer, Если вместо guitar-muzon.ru после авторизации заголовок нормально отображается, то проблема как и у меня на SteamGame. У меня выставлен Doctype XHTML 1.0 Strict. Поддержка говорит вот что:
 Писал по поводу заголовка сайта (до uNet авторизации), писал по поводу невозможности авторизации на u.to, писал по поводу отсутствия самой графы Explorer 9.xx в статистике - 7 августа писал в поддержку, 14 марта вышел браузер. До сих пор ни одной из вышеперечисленных ошибок не исправили -_- Прикрепления:
5143659.png
(27.6 Kb)
|
|
|
|
Помогите пожалуйста, не могу найти ошибку, как всегда капризный IE перекашивает весь дизайн.
В опере и мозиле все ровно, в IE контент страницы опускается вниз. В чем ошибка кода главной страницы: Code <div style="width: 550px;"> <div align="center"><a href="http://millerovo161.ru/gb" target="_blank"><img border="0" align="absmiddle" src="http://millerovo161.ru/images/Otzyv.png"></a></div> <div style="width: 270px; float: right;"><div> <table cellspacing="0" width="270"> <tbody><tr> <td class="eTitle_r" style="text-transform: uppercase;"> <span style="display: block;">Форум </span> </td> <td class="eTitle_r" align="right"> <a href="/forum/"> <img src="/images/posmotret.png" alt="view" title="все форумы" style="padding-bottom: 2px;" align="absmiddle" border="0"></a> <img src="/images/bordur.png" align="absmiddle" border="0"> <a href="/forum/"><img src="/images/add.png" alt="add" title="добавить сообщение" style="padding-bottom: 2px;" align="absmiddle" border="0"></a> <img src="/images/bordur.png" align="absmiddle" border="0"> <a href="/forum/0-0-0-37"><img src="/images/rss.png" alt="rss" title="подписаться на форум" style="padding-bottom: 2px;" align="absmiddle" border="0"></a> </td> </tr> </tbody></table> </div>$MYINF_60$ </div> <div style="width: 270px; float: right; margin-right: 4px;"><div> <table cellspacing="0" width="270"> <tbody><tr> <td class="eTitle_r" style="text-transform: uppercase;"> <span style="display: block;">Новости </span> </td> <td class="eTitle_r" align="right"> <a href="/news/"> <img src="/images/posmotret.png" alt="view" title="все новости" style="padding-bottom: 2px;" align="absmiddle" border="0"></a> <img src="/images/bordur.png" align="absmiddle" border="0"> <a href="/news/0-0-0-0-1"><img src="/images/add.png" alt="add" title="добавить новость" style="padding-bottom: 2px;" align="absmiddle" border="0"></a> <img src="/images/bordur.png" align="absmiddle" border="0"> <a href="/news/rss"><img src="/images/rss.png" alt="rss" title="подписаться на новости" style="padding-bottom: 2px;" align="absmiddle" border="0"></a> </td> </tr> </tbody></table> </div>$MYINF_63$ </div> <div class="bod-width" style="float: right;"> <div style="width: 270px; float: right;"><div> <table cellspacing="0" width="270"> <tbody><tr> <td class="eTitle_r" style="text-transform: uppercase;"> <span style="display: block;">Объявления </span> </td> <td class="eTitle_r" align="right"> <a href="/board/"> <img src="/images/posmotret.png" alt="view" title="все объявления" style="padding-bottom: 2px;" align="absmiddle" border="0"></a> <img src="/images/bordur.png" align="absmiddle" border="0"> <a href="/board/0-0-0-0-1"><img src="/images/add.png" alt="add" title="добавить объявление" style="padding-bottom: 2px;" align="absmiddle" border="0"></a> <img src="/images/bordur.png" align="absmiddle" border="0"> <a href="/board/rss"><img src="/images/rss.png" alt="rss" title="подписаться на обьявления" style="padding-bottom: 2px;" align="absmiddle" border="0"></a> </td> </tr> </tbody></table> </div>$MYINF_62$ </div> <div style="width: 270px; float: right; margin-right: 4px;"><div> <table cellspacing="0" width="270"> <tbody><tr> <td class="eTitle_r" style="text-transform: uppercase;"> <span style="display: block;">Блог </span> </td> <td class="eTitle_r" align="right"> <a href="/blog/"> <img src="/images/posmotret.png" alt="view" title="все заметки" style="padding-bottom: 2px;" align="absmiddle" border="0"></a> <img src="/images/bordur.png" align="absmiddle" border="0"> <a href="/blog/0-0-0-0-1"><img src="/images/add.png" alt="add" title="добавить заметку" style="padding-bottom: 2px;" align="absmiddle" border="0"></a> <img src="/images/bordur.png" align="absmiddle" border="0"> <a href="/blog/rss"><img src="/images/rss.png" alt="rss" title="подписаться на заметки" style="padding-bottom: 2px;" align="absmiddle" border="0"></a> </td> </tr> </tbody> </table> </div>$MYINF_64$ </div></div> <div class="bod-width" style="float: right;"> <div style="width: 270px; float: right;"><div> <table cellspacing="0" width="270"> <tbody><tr> <td class="eTitle_r" style="text-transform: uppercase;"> <span style="display: block;">Бизнес Справочник </span> </td> <td class="eTitle_r" align="right"> <a href="/publ/"> <img src="/images/posmotret.png" alt="view" title="все справки" style="padding-bottom: 2px;" align="absmiddle" border="0"></a> <img src="/images/bordur.png" align="absmiddle" border="0"> <a href="/publ/0-0-0-0-1"><img src="/images/add.png" alt="add" title="добавить справку" style="padding-bottom: 2px;" align="absmiddle" border="0"></a> <img src="/images/bordur.png" align="absmiddle" border="0"> <a href="/publ/rss"><img src="/images/rss.png" alt="rss" title="подписаться на бизнес-справочник" style="padding-bottom: 2px;" align="absmiddle" border="0"></a> </td> </tr> </tbody></table> </div>$MYINF_65$ </div> <div class="bod-width" style="float: right;"> <div style="width: 270px; float: right; margin-right: 4px;"><div> <table cellspacing="0" width="270"> <tbody><tr> <td class="eTitle_r" style="text-transform: uppercase;"> <span style="display: block;">Галерея </span> </td> <td class="eTitle_r" align="right"> <a href="/photo/"> <img src="/images/posmotret.png" alt="view" title="все фото" style="padding-bottom: 2px;" align="absmiddle" border="0"></a> <img src="/images/bordur.png" align="absmiddle" border="0"> <a href="/photo/0-0-0-1"><img src="/images/add.png" alt="add" title="добавить фото" style="padding-bottom: 2px;" align="absmiddle" border="0"></a> <img src="/images/bordur.png" align="absmiddle" border="0"> <a href="/photo/rss"><img src="/images/rss.png" alt="rss" title="подписаться на фото" style="padding-bottom: 2px;" align="absmiddle" border="0"></a> </td> </tr> </tbody></table> </div>$MYINF_68$ </div></div></div> <div style="width: 550px; float: right; margin-right: 4px;"><div> <table cellspacing="0" width="550"> <tbody><tr> <td class="eTitle_r" style="text-transform: uppercase;"> <span style="display: block;">Пользователи комментируют </span> </td> <td class="eTitle_r" align="right"> </td> </tr> </tbody></table> </div>$MYINF_71$ </div></div> <div class="bod-width" style="float: right;"> <div style="width: 550px; float: right; margin-right: 4px;"><div> <table cellspacing="0" width="550"> <tbody><tr> <td class="eTitle_r" style="text-transform: uppercase;"> <span style="display: block;">Виджеты портала </span> </td> <td class="eTitle_r" align="right"> <a href="/index/vidzhety_portala_millerovo/0-54"> <img src="/images/posmotret.png" alt="view" title="все виджеты" style="padding-bottom: 2px;" align="absmiddle" border="0"></a> </td> </tr> </tbody></table> </div> <tr> <td> <h3><div id=info><a href="http://www.yandex.ru?add=74390&from=promocode" target="_blank"><img style="float: left; padding: 0 10px 10px 0;" src="http://wimg.yandex.net/74/39/t-74390.png" alt="" border="0"/></a><div style="margin:7px 0 0 160px;"><h3 style="margin-top: 0px;"><a href="http://www.yandex.ru?add=74390&from=promocode" target="_blank" style="color:#000;">Новости города Миллерово</a></h3><p>Новости города Миллерово и Миллеровского района, Мероприятия, События, Проблемы, Анонсы</p><a style="display: block; margin-top: 0.5em;border:none;" target="_blank" href="http://www.yandex.ru?add=74390&from=promocode"><img border="0" src="http://img.yandex.net/i/service/wdgt/b-wdgt-add-button_lang_ru.png" alt="добавить на Яндекс"/></a></div></div></div></div> </td> </tr> </tbody></table> </div> Миллерово - это город в Ростовской области.
|
|
Dеfrаgо,
Quote Explorer 9.xx в статистике - 7 августа писал в поддержку, 14 марта вышел браузер. До сих пор ни одной из вышеперечисленных ошибок не исправили -_- IE 9 отображается как - other ? вышел не 14 марта а в середине сентября прошлого года . Quote У меня выставлен Doctype XHTML 1.0 Strict. Миллер, Quote как всегда капризный IE перекашивает весь дизайн. Смените Doctype в Общих настройках на этот , потом смотрите что куда опускается ..... <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> Сообщение отредактировал Miss_Esq - Четверг, 29 Сен 2011, 22:01:15
|
|
Quote (Miss_Esq) Нечего пенять Та я как раз на свою и голову и пинал  Спасибо, помогло, только теперь центрировались темы форума. Терпимо, но как то что то не то. Раньше было прижаты к левому краю:  Прикрепления:
3319017.png
(158.6 Kb)
Миллерово - это город в Ростовской области.
Сообщение отредактировал Миллер - Четверг, 29 Сен 2011, 22:24:58
|
|
Миллер,
Quote Раньше было прижаты к левому краю: <body style="text-align: left;"> |
|
имеется проблема с IE (удивил наверное кого-то) при Div'ной верстке. Хочу задать расположение основного блока, содержащего внутренние, по центру с помощью margin:0px auto. Эксплорер конечно же не понимает. Ему проставляю для html и body text-align:center. Все работает, но все содержимое внутренних блоков в Эксплорере выравнивается по центру. Наследование, его растак..
подскажите как исправить "...В последнее время мне на все наплевать - мне не наплевать лишь на то, что мне на все наплевать, и это меня волнует..."
|
|
Amateur,
Quote подскажите как исправить 1 . По любому должен быть Doctype 2 . </head> <body style="text-align: center;"> <div style="text-align: left;"> Далее весь шаблон ... В DIV со стилем text-align: left указать ширину следующего элемента ... Тогда он , элемент , будет центороваться по средине а его содержание будет слева .. Сообщение отредактировал Miss_Esq - Воскресенье, 02 Окт 2011, 11:10:36
|
|
Здравствуйте. Последнее время я работал в opera и совсем не проверял, как сайт отображается в других браузерах. В итоге я зашёл на него в IE и обнаружил, что там полная беда: отображается только шапка сайта, а браузер вообще завис, пришлось вырубать через диспетчер задач. Прошу не судить строго, я первый раз занимаюсь сайтостроением. И в придачу ещё пару вопросов:
1) На главной странице форума всё хорошо, но если углубляться в разделы, то при наведении курсора на форум, полоса становится ниже. Как от этого избавиться? 2) На форуме подвал сайта находится не на положенном ему месте (самый низ), а сразу после форума. Как это исправить? 3) Я хочу, чтобы при нажатии на кнопку "помоги сайту" открывалось окно, в котором будет написано всё тоже самое, что и в блоке "помощь". И ещё вопрос - можно ли сделать эту кнопку прозрачной? 4) В мини-чате, если написать сообщение длиной более строки, появится полоса прокрутки, а мне нужно, чтобы сообщение автоматически разделялось и переносилось на следующую строку. 5) В информерах, выводящих разные материалы (страница - новое на сайте) нет картинок. Можно ли их добавить? 6) На странице тестов нет иконки RSS (в строке браузера). Она имеет такой код Quote <link rel="alternate" type="application/rss+xml" title="RSS-канал" href="$RSS_LINK$"> 7) Можно ли добавить на сайт поле для подписки на рассылки (без перехода пользователей в свой профиль)? 8) Можно ли сделать общую RSS ленту для всех категорий сайта? 9) И последний вопрос. Я недавно прочитал заметку про бесплатные домены 2 уровня в зоне tk. Можете рассказать поподробнее, что это за рыба и с чем её едят? ПЕРЕЙТИ НА САЙТ Надеюсь на ответ и понимание. |
| |||
Будьте в курсе всех обновлений: подпишитесь на наш официальный Telegram-канал uCoz и задавайте вопросы в чате сообщества!