Чат сообщества
   | |
| Модератор форума: 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 |
|
Amati5210, знаете как создаются таблицы? Хм, тупой вопрос, в любом случае вот:
Code <table border="0" cellpadding="0" cellspacing="0"> <tr> <td>1й счётчик</td> <td>2й счётчик</td> <td>3 счётчик</td> <td>и т.д.</td> </tr> </table> Добавлено (25-Авг-2012, 11:43:48) --------------------------------------------- dolgorykiu, на форуме этого и не будет. Откройте сайт в опере и через Проинспектировать элемент посмотрите чему равны значения z-index у обоих блоков, потом через свой CSS с параметром !MPORTANT задаёте свои значения для z-index. Если что-то не понятно, пишите, лучше в личку, дабы не засорять форум. Вам помогут, если прикрепите:
- Ссылку на сайт - Скриншот проблемы через встроенное прикрепление изображений - HTML (CSS) Код проблемного участка в спойлере Сообщение отредактировал -=WaMpIr=- - Суббота, 25 Авг 2012, 13:33:54
|
|
Спасибо за помощь. Только зашел на форум чтобы сообщить радостную, как для меня, новость что разобрался и всё работает, а тут оказывается уже ответ на мой "тупой вопрос" имеется. Если есть желание помочь и есть что сказать, то ответь, а умничать не стоит. Вы тоже не с клавиатурой под мышкой родились и с Билом Гейтсом в родстве не состоите. У многих админов знаний побольше Вашего будет, но они не позволяют себе подобных высказываний. Но всё равно спасибо и удачи!
Мой сайт РемДомТех
|
|
Я же в шутку это сказал. И фраза "Тупой вопрос" относилась к вопросу, который я сам задал: знаете как создаются таблицы?, а не к вам. Так что не стоит обижаться, я наоборот рад был помочь.
 Вам помогут, если прикрепите:
- Ссылку на сайт - Скриншот проблемы через встроенное прикрепление изображений - HTML (CSS) Код проблемного участка в спойлере |
|
Quote (-=WaMpIr=-) dolgorykiu, на форуме этого и не будет. Откройте сайт в опере и через Проинспектировать элемент посмотрите чему равны значения z-index у обоих блоков, потом через свой CSS с параметром !MPORTANT задаёте свои значения для z-index. Решил вопрос по другому как описано здесь http://krogrim.ru/blog/youtube_iframe_fix незнаю как лучше но помогло всеровно огромное спасибо за помощь С рекламным флеш роликом театральной постановки тоже решилось все само собой вернулся на ранний шаблон в Backup шаблонов и в ие9 тоже ролик начал грузится быстро Но никак не могу решить вопрос с оперой у меня бегущая строка в верху сайта в опере смещена влево в других браузерах все хорошо и на главной странице есть смещение текста в других браузерах все отображается одинаково . <!DOCTYPE> стоит на главной и в верхней части сайта вот этот <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> подскажите пожалуйста кто знает в чем причина http://dolgoryk.at.ua/ |
|
dolgorykiu, В Opera текст всегда будет отображаться не так как в остальных обозревателях ...
|
|
Quote (Miss_Esq) dolgorykiu, В Opera текст всегда будет отображаться не так как в остальных обозревателях ... А Бегущая строка в верху сайта можно с ней что то придумать Сообщение отредактировал dolgorykiu - Суббота, 25 Авг 2012, 20:56:46
|
|
Здравствуйте. У моего сайта в IE только на главной странице пропадает правая колонка блоков, на остальных страницах она видна. В Мозилле, Опере и Гугле все видно нормально.
Сайт: http://gsk-irkutsk.ucoz.ru/ Подскажите, что можно сделать? Я - новичок. |
|
Управление дизайном=>Страницы сайта, в блоке head проверьте есть ли такая строчка
Code <!--[if IE]><link rel="stylesheet" type="text/css" href="/img/ie7.css" /><![endif]--> Если есть, попробуйте удалить и посмотреть результат, если нет то в Таблице стилей CSS попробуйте найти примерно такой комментарий: Code /* ------------- * IE <8 * ------------- */ Или класс (тоже в css) Code .old-browser Используйте поиск по странице (Ctrl+F) установив указатель в поле с кодом. Вам помогут, если прикрепите:
- Ссылку на сайт - Скриншот проблемы через встроенное прикрепление изображений - HTML (CSS) Код проблемного участка в спойлере Сообщение отредактировал -=WaMpIr=- - Понедельник, 27 Авг 2012, 18:09:12
|
|
WaMpIr, ни один из трех вариантов не найден. Вот Страницы сайта, блок <head>:
Использую дизайн 121. Изменила только одну строку таблицы в шапке сайта (там была синяя полоса). Есть еще одна проблема: в том же IE на главной странице видны только 3 новости на первой странице и одна - на второй (а всего новостей 18!). |
|
Natavit, Проблема с отображением сайта в Internet Explorer создана вами же ... Этого в материалах новостей быть не должно .
Решение проблемы: Удалить эти коды из материалов новостей. Переписать все новости не используя Ms Office Word. Нельзя делать что либо для сайта в Ms Office Word. И пропишите Doctype в общих настройках сайта. |
|
Natavit, Прописать в Панели управления в Настойки - Общие настройки есть поле внизу:
Значение тега <!DOCTYPE>: Данный тег будет добавлен в самое начало документа. Используйте эту настройку только если понимаете ее смысл. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> Сообщение отредактировал Miss_Esq - Вторник, 28 Авг 2012, 11:29:03
|
|
Miss_Esq, после добавления указанной Вами строчки в поле <!DOCTYPE> главное меню сайта стало отображаться некорректно на всех страницах сайта: буквы наехали на стрелочки слева. Выглядит одинаково и в IE, и в Mozilla Firefox. Напомню адрес сайта:
|
|
Natavit, Допишите в CSS
.uMenuItem {padding-left: 13px;} Сообщение отредактировал Miss_Esq - Вторник, 28 Авг 2012, 13:17:47
|
| |||
Будьте в курсе всех обновлений: подпишитесь на наш официальный Telegram-канал uCoz и задавайте вопросы в чате сообщества!