Чат сообщества
   | |
| Модератор форума: 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 |
|
Quick,
Quote (Quick) В ИЕ - что-то вытягивает экран вправо примерно в 2 раза Какая версия ИЕ? Именно в два раза? Я наблюдаю смещение только на рекламный блок ≈ 300px не больше ... ... На форуме тоже. Всё написанное выше - моё личное мнение и на абсолютную правоту не претендует.
Есть вопросы лично ко мне - пиши сюда: http://likbezz.ru/forum/8 |
|
Quick,
Quote (Quick) Странное дело, ширина окна с сайтом в ИЕ у меня просто не поддаётся измерению! Кажется, видел такое, и уже не раз ))) Это отступы в % ... Ладненько, позже гляну что там такое ) Всё написанное выше - моё личное мнение и на абсолютную правоту не претендует.
Есть вопросы лично ко мне - пиши сюда: http://likbezz.ru/forum/8 |
|
Quick, У вас распирает страницу из за рядов фотографий
1 . В новости Последние загруженные 2 . В колонке Самые оцениваемые Самые обсуждаемые Самые интересные 3 . Да и 3 колонки в блоках многовато Активные фотографы Лучшие критики 4 . Пропишите Doctype в Общих настройках - Значение <!DOCTYPE> Сообщение отредактировал Miss_Esq - Понедельник, 30 Янв 2012, 10:44:47
|
|
Quote (Miss_Esq) 4 . Пропишите Doctype в Общих настройках - Значение <!DOCTYPE> А я раньше думал, что эта строка просто так там стоит(!DOCTYPE) Оформление подписи нарушает правила форума Сообщества uCoz. Подробнее. / webanet.
|
|
SPAUN5, Для обозревателей тмпа Google Chrome , Mozilla FireFox и Opera ни какой разницы .
А для Internet Explorer от 8 версии и выше ( 8 - 9 - 10 ) есть разница и очень большая .....  Сообщение отредактировал Miss_Esq - Понедельник, 30 Янв 2012, 14:06:04
|
|
Quote (Miss_Esq) Quick, У вас распирает страницу из за рядов фотографий 1 . В новости Последние загруженные 2 . В колонке Самые оцениваемые Самые обсуждаемые Самые интересные 3 . Да и 3 колонки в блоках многовато Активные фотографы Лучшие критики Если бы распирало от картинок, распирало бы во всех браузерах и лишь на ширину картинок, а у меня распирает на бесконечное число пикселей! *** Куда прописать Значение <!DOCTYPE> ? |
|
Quick,
Quote Значение <!DOCTYPE> А Doctype это <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> или такой <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Quote распирало бы во всех браузерах и лишь на ширину картинок, В IE 9 распирает именно на ряд изображений из за того что они уложены в одну строку ... Сообщение отредактировал Miss_Esq - Понедельник, 30 Янв 2012, 14:38:59
|
|
Итак, данные следующие:
Что-то в страницах сайта расширяет их до бесконечности по горизонтали! т.е. полосой прокрутки невозможно подвинуть до конца вправо. Может непонятно выражаюсь, но не знаю как это ещё назвать...) Самое интересное - эта проблема только у группы "ГОСТЬ"(если авторизоваться, то сайт приобретает нормальный вид) и только в ИЕ (!). В Мозиле и Хроме всё нормаль. зы:(дело не в ширине информеров! Иначе у авторизованных пользователей, проблема бы не исчезала) Прошу помощи... Сайт |
|
Quick,
Quote Итак, данные следующие: Я лично в IE 9 , в любом режиме наблюдаю только распирание контента и колонок рядами изображений . Максимум на 15% .... Попробуйте поставить в заголовок шаблона эту конструкцию .. Сообщение отредактировал Miss_Esq - Среда, 01 Фев 2012, 01:19:00
|
|
Quote (Miss_Esq) Quick, Quote Итак, данные следующие: Продолжение следует ... В какой версии IE у вас бесконечный скроллинг по горизонтали ??? Я лично в IE 9 , в любом режиме наблюдаю только распирание контента и колонок рядами изображений . Максимум на 15% .... Попробуйте поставить в заголовок шаблона эту конструкцию .. ИЕ-7 у меня. Это принципиально? А где гарантия, что у половины посетителей не стоит тот же ИЕ7 ? *** Куда именно этот код вставлять? |
|
Quick,
Quote А где гарантия, что у половины посетителей не стоит тот же ИЕ7 Скоро выйдет IE 10 а они всё ещё скребуться на версиях созданных 5 - 10 лет назад ... Они вам нужны ? Я лично квалифицирую их как ленивцев , если им влом поставить нормальную версию Windows с IE 8 или IE 9 , то мне влом адаптировать сайты под IE 5 - 6 - 7 . Оно мне надо этот геморрой ? Хотя у вас на сайте с шаблоном ( HTML и CSS ) есть проблема и ситуация с IE 7 говорит что немаленькая . Нормально свёрстаный HTML не должно так сильно корёжить как в IE 7 . У вас CSS 3 применяется на сайте ??? И вообще сравнивать как выглядит сайт в IE 7 и в других обозревателях ( даже почти последних версиях ) не корректно .. Quote Куда именно этот код вставлять? Сообщение отредактировал Miss_Esq - Среда, 01 Фев 2012, 01:42:43
|
|
Quick,
1) для начала прежде чем что то верстать, изучите в какой последовательности, атрибуты, теги, скрипты должны располагаться на странице ! 2) У ВАС ТАКОЙ БАРДАК ПРОСТО ПИПЕЦ ! к примеру вот этого всё, не должно быть перед тегом <head> Code <div id="a71ab5020c7c19a2241ee70309b6630e3"><style type="text/css">.caRk5Ha {position:absolute;right:0px;top:0px;z-index:10000;} div > div.caRk5Ha {position:fixed;}</style> <script type="text/javascript">function faRk5Ha(a){try{document.getElementById("paRk5Ha").style.display=a;}catch(e){}try{document.getElementById("aRk5Ha").style.display=a;}catch(e){}}function f2aRk5Ha(){faRk5Ha('');} new Image().src = "http://counter.yadro.ru/hit;ucoznet2?r"+escape(document.referrer)+((typeof(screen)=="undefined")?"":";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth?screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";"+Math.random();</script> <div id="paRk5Ha" class="caRk5Ha"> <style type="text/css"> a.a-close-link {font: 10px/14px 'Tahoma', 'Arial' !important;color: #3e3e3e !important;text-decoration: underline !important;margin: 0 !important;background:#ffffff;border-radius:3px;-moz-border-radius:3px;padding:0 4px;} a.a-close-link:hover {text-decoration: none !important;} a.a-buttons {color: #3e3e3e !important;text-transform: uppercase !important;font: 14px/25px 'Tahoma', 'Trebuchet MS', 'Arial' !important;text-shadow: 0 1px 1px #fff;text-decoration: none !important;display: block;height: 25px !important;margin: 3px 0 !important;} a.a-buttons span {display: block !important;text-align: center !important;height:25px;line-height: 23px !important;padding: 0 0 0 12px !important;} a.a-buttons span span {} a.green-but {background: url(http://s24.ucoz.net/ucoz/img/uads/a-buttons.png) no-repeat right -25px;padding-right: 7px;} a.green-but span {background: url(http://s24.ucoz.net/ucoz/img/uads/a-buttons.png) no-repeat;} a.blue-but {background: url(http://s24.ucoz.net/ucoz/img/uads/a-buttons.png) no-repeat right -75px;padding-right: 7px;} a.blue-but span {background: url(http://s24.ucoz.net/ucoz/img/uads/a-buttons.png) no-repeat 0 -50px;} a.a-buttons.a-check span span {background: url(http://s24.ucoz.net/ucoz/img/uads/b-ico-check.png) no-repeat 0 5px;} a.a-buttons.a-clock span span {background: url(http://s24.ucoz.net/ucoz/img/uads/b-ico-clock.png) no-repeat 0 5px;} </style> <table border="0" cellspacing="0" cellpadding="0" id="aRk5Ha" style="z-index:10000;width:282px"> <tr> <td valign="top" width="12"><a href="javascript://" onclick="faRk5Ha('none');return false;" title="Закрыть"><img alt="" src="http://s24.ucoz.net/img/ma/cv.gif" style="border:0;width:12px;height:54px;margin-top:31px;"></a></td> <td id="advtd" width="270" style="background:#fff;"><a href="javascript://" onclick="new _uWnd('SMSPAYFORM', 'Отключение рекламы', -550, -330, {resize:0,autosize:0,align:'justify'}, { url: 'http://s0.ucoz.net/cgi/ucozads.fcg?a=payform_p0', type: 'GET', data: '', timeout: 20000, dataType: 'jsonp', success: function(data){ if(this.wnd>0 && _uWnd.all[this.wnd]) _uWnd.all[this.wnd].content(data.PAYFORM); } });return false;" title="Отключить рекламу на всех сайтах системы uCoz" class="a-buttons green-but a-clock"><span><span>Отключить рекламу</span></span></a><script type="text/javascript">document.write('<iframe ALLOWTRANSPARENCY="true" frameborder="0" width="270" scrolling="no" style="height:430px;background-color:transparent;border:0px" src="/abnl/?begun=2"></iframe>');</script> <a href="http://www.ucoz.ru/?pguid=882644864" target="_blank" class="a-buttons blue-but a-check"><span><span>Создать сайт бесплатно</span></span></a> </td></tr> </table></div></div><div><script type="text/javascript" src="http://s24.ucoz.net/cgi/uutils.fcg?a=ucozads_isoff&s=planeta-foto.ucoz.ru"></script></div><html> 3) косяк подозреваю здесь <style type="text/css">.caRk5Ha {position:absolute;right:0px;top:0px;z-index:10000;} div > div.caRk5Ha {position:fixed;}</style> мои проекты:
 Сообщение отредактировал DarkArt3D - Среда, 01 Фев 2012, 01:54:19
|
|
DarkArt3D,
Quote к примеру вот этого всё, не должно быть перед тегом <head> |
|
DarkArt3D,
Quote к примеру вот этого всё, не должно быть перед тегом <head> |
| |||