| Модератор форума: 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 |
|
Quote (Miss_Esq) Owner1919, Ещё замечательнее было бы воспользоваться HTML редактором типа Ms Office SharePoint Designer 2007 и немного пофантазировать экспериментально .. <button style="width: 100px; height: 100px;"><img alt="" src="изображение" style="width: 50px; height: 50px;"></button> Спасибо за ответ. Разобрался проще: в CSS прописал еще одну кнопку ("css_button" - видимо, я помешан на кнопках) с эффектом "hover" и элементом "display:inline-block", а в самом шаблоне: <DIV class="css_button">код нужного блока или таблицы</DIV>. Работает корректно на браузерах: IE8, Cr2, Cr8, Op9.2, Op10, Sa3.1, Sa5, Fx3, Fx4 На броузерах Internet Explorer до версии 7 включительно значение inline-block применяется только для встроенных элементов, с блочными элементами работает некорректно. Еще раз с наступающими! ![]() Верстаю сайты на uCoz от 500 ք (Блочная верстка на HTML5)
ВКонтакте: http://vk.com/vg_forex Мой Мир: http://my.mail.ru/mail/vg_forex |
|
Прикрепления:
7893231.png
(4.8 Kb)
Сообщение отредактировал europe-kiev - Понедельник, 26 Дек 2011, 22:14:21
|
|
Добрый вечер. У меня такая проблема. При отображении сайта во всех браузерах кроме ИЕ, сайт работает нормально, с дизайном всё в порядке, а при просмотре сайта через ИЕ меню перестает работать. Кроме этого имеется много проблем, все они выделены на скрине. Очень прошу помочь. Спасибо!
Так сайт отображается в любом браузере, кроме ИЕ (на скрине - Mozilla): А так, в браузере ИЕ: Проблемы отметил цветами. Красным - блок матчей, непонятно почему он квадратный. Чёрным - вид новостей. Та же проблема. Он квадратный и при наведении курсором не меняется фон, хотя в остальных браузерах все работает отлично. И фиолетовым - меню, которое вообще не работает в ИЕ. И расположено не на всю ширину сайта непонятно почему. Ссылка на сайт: http://www.fc-saxan.ru Спасибо большое! Прикрепления:
4340184.jpg
(129.3 Kb)
·
3030249.jpg
(133.6 Kb)
Сообщение отредактировал RONALDINHO08 - Вторник, 27 Дек 2011, 04:18:54
|
|
|
|
Miss_Esq,В каком смысле от уда? Он из шаблона,шаблон какой скинуть? и я попробовал убрать ничего не изменилось,щас конечно стоит все то же.
Скрипты вы говорите в заголовке я в интернете вычитал что так вставляют скрипты, и например как заменить сам скрипт вы имеете ввиду? Сообщение отредактировал Bumer_2 - Вторник, 27 Дек 2011, 14:59:38
|
|
|
|
Quote <style type="text/css" media="all"> @import url(/highslide/highslide.css); </style> <script type="text/javascript" src="/highslide/highslide.js"></script> <script type='text/javascript' src='/highslide/include_highslide.js'></script> <script type="text/javascript"> hs.graphicsDir = '/highslide/graphics/'; </script> <div id="allEntries"><div id="entryID762"><table border="0" cellpadding="0" cellspacing="2" width="100%"><tr><td> <table border="0" cellpadding="0" cellspacing="0" width="100%" class="bBlok"><tr><td style="padding:3px;"> <table width="100%" border="0" cellspacing="1" cellpadding="0"> <tr> <td width="5%" class="eTitle" align="left" style="border: 1px solid #5d5d5d;padding-bottom:3px;"><center><img src="/img/new.png" border="0"></center></td> <td width="90%" class="eTitle" style="border: 1px solid #5d5d5d;padding-bottom:3px;"><?if($MODER_PANEL$)?><div style="float:right">$MODER_PANEL$</div><?endif?><a href="$ENTRY_URL$"><span style="color rgb (0, 255, 78);">$TITLE$</span></a></td> <td width="5%" class="eTitle" align="right" style="border: #5d5d5d solid 1px;"> <a style="font-weight:normal" href="javascript://" onclick="$('#news_$ID$').slideToggle('slow');"><center><img src="/img/news_strelki.png" border="0"></center></a></td> </tr> </table> <div id="news_$ID$"> <font color="#5d5d5d"><?if($MESSAGE$)?><div class="eMessage" style="text-align:left;clear:both;padding-top:2px;padding-bottom:2px;"><?endif?> <table width="100%"> <tr> <table width="100%"> <tr> <table align="left"> <div style="position:relative;"> <div align="left"><a href="$IMG_URL1$" class="highslide" onclick="return hs.expand(this)"> <P ALIGN="LEFT" ><img style="position:absolute;" src="/img/ramka.png" border="0"></p> <IMG alt="$TITLE$" src="$IMG_URL1$" align="left" height="120" width="187" border="0"></a></div> </table><div class="pul">$MESSAGE$</div> </tr></table> </td></tr></tbody></table></div><div id="entryID396"><div id="myGrid" style="display:none;"><div style="position:fixed;width:100%;text-align:center;padding-top:250px;"><img src="http://s9.ucoz.net/img/ma/m/i3.gif" border="0" width="220" height="19"></div></div><script type="text/javascript">function spages(p){if (1){document.location.href='/news/'+p; return;}try{document.getElementById('myGrid').style.cssText = 'position:absolute; z-index:8; top:0;left:0; display:block; background: url(\'http://s9.ucoz.net/img/fr/g.gif\'); text-align:center; width:'+document.body.scrollWidth+'px; height:'+document.body.scrollHeight+'px;';}catch(e){}_uPostForm('',{url:'/index/0-0-0-'+p+'-'+Math.floor(Math.random()*1e8)});}</script><div id="allEntries"><div id="entryID332"> |
|
Bumer_2,
Это такой шаблон вида материалов ???? Ужас и ну тогда ни чего удивительного , щас подправим и попробуете ..Сообщение отредактировал Miss_Esq - Вторник, 27 Дек 2011, 15:10:52
|
|
Да это такой вид.Можно узнать этот скрипт нужен?
Quote <script type="text/javascript"> //<![CDATA[ function getBrowserInfo() { var t,v = undefined; if (window.opera) t = 'Opera'; else if (document.all) { t = 'IE'; var nv = navigator.appVersion; var s = nv.indexOf('MSIE')+5; v = nv.substring(s,s+1); } else if (navigator.appName) t = 'Netscape'; return {type:t,version:v}; } function bookmark(a){ var url = window.document.location; var title = window.document.title; var b = getBrowserInfo(); if (b.type == 'IE' && 7 > b.version && b.version >= 4) window.external.AddFavorite(url,title); else if (b.type == 'Opera') { a.href = url; a.rel = "sidebar"; a.title = url+','+title; return true; } else if (b.type == "Netscape") window.sidebar.addPanel(title,url,""); else alert("Нажмите CTRL-D, чтобы добавить страницу в закладки."); return false; } //]]> </script> Так можно их через браузер добавлять :) Извините вы код доделали? Спасибо большое за код,но извините опять же меня до сих пор перебрасывает на новости я просто не совсем понял что сделать Все разобрался как всегда вам большое человеческое спасибо Сообщение отредактировал Bumer_2 - Вторник, 27 Дек 2011, 15:37:09
|
|
Bumer_2,
Quote Можно узнать этот скрипт нужен? Quote а то напросто их уберу. То что выделено цветом скорее всего так же нужно выбросить .. Сообщение отредактировал Miss_Esq - Вторник, 27 Дек 2011, 15:27:27
|
|
Miss_Esq, Можно немного подробнее? Что именно там прописать? Какой код?
Сообщение отредактировал RONALDINHO08 - Вторник, 27 Дек 2011, 15:33:10
|
|
RONALDINHO08, Панель управления - Админ бар - Общее - Общие настройки
Внизу поле ввода Значение тега <!DOCTYPE>: туда и написать ... <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> Сохранить , всё .. |
|
Miss_Esq, Спасибо большое за помощь! Всё работает отлично!!!!
![]() |
|
Работала с дизайном в Опере, а когда открыла результат в Мозилле Файерфокс, выяснилось, что в лисичке получившийся дизайн отражается не так, как задумывалось и каков он в Опере. Прошу помочь исправить отображение в Мозилле.
Адрес сайта: http://altengland.ucoz.ru/forum Описание отличий: Сообщение отредактировал Mirabel - Среда, 28 Дек 2011, 00:36:03
|
|
Mirabel, то как показывает в Mozilla FireFox это настоящее отображение , глючит у вас в Opera , как раз ... как это не печально ..
Вы как трактуете например этот цвет ?? <font color="DeepSkyBlue4" >Друзья "Старой доброй Англии" ... А заголовок шаблона просто , в шоке .. цвет оранжевокрасный это как ??? Короче говоря , исправляйте ошибки CSS и стилей , везде , по всему сайту , по всем шаблонами ... Не все обозреватели особо продвинутые в трактовке текстовых написаний значений цвета .. смените на иную форму записи значения - #XXXXXX Сообщение отредактировал Miss_Esq - Среда, 28 Дек 2011, 01:59:28
|
| |||

Чат сообщества













Это такой шаблон вида материалов ???? Ужас и ну тогда ни чего удивительного , щас подправим и попробуете ..





<a class="link" href="//u.to/dQ1mAQ" title="http://i1094.photobucket.com/albums/i456/stresearches/c3876a5c.png" rel="nofollow" target="_blank"> 

