Модератор форума: Yuri_G  
Оптимизация дизайна под разные браузеры
Модератор форума
Сообщение # 1 | 22:12:11
Зачем нужен "правильный" 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
Owner1919
Сообщений: 22
Репутация: 0

Сообщение # 211 | 20:35:00
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 применяется только для встроенных элементов, с блочными элементами работает некорректно.

Еще раз с наступающими! smile

Верстаю сайты на uCoz от 500 ք (Блочная верстка на HTML5)
ВКонтакте: http://vk.com/vg_forex
Мой Мир: http://my.mail.ru/mail/vg_forex
europe-kiev
Сообщений: 20
Репутация: 21
Уровень замечаний:

Сообщение # 212 | 22:14:02
У меня в опере рейтинг материалов вот так выводит .Почему? В ИЕ9 все норма обычные звездочки.
Прикрепления: 7893231.png (4.8 Kb)

Сообщение отредактировал europe-kiev - Понедельник, 26 Дек 2011, 22:14:21
RONALDINHO08
Сообщений: 15
Репутация: 22

Сообщение # 213 | 04:18:42
Добрый вечер. У меня такая проблема. При отображении сайта во всех браузерах кроме ИЕ, сайт работает нормально, с дизайном всё в порядке, а при просмотре сайта через ИЕ меню перестает работать. Кроме этого имеется много проблем, все они выделены на скрине. Очень прошу помочь. Спасибо!

Так сайт отображается в любом браузере, кроме ИЕ (на скрине - Mozilla):


А так, в браузере ИЕ:


Проблемы отметил цветами.
Красным - блок матчей, непонятно почему он квадратный.
Чёрным - вид новостей. Та же проблема. Он квадратный и при наведении курсором не меняется фон, хотя в остальных браузерах все работает отлично.
И фиолетовым - меню, которое вообще не работает в ИЕ. И расположено не на всю ширину сайта непонятно почему.

Ссылка на сайт: http://www.fc-saxan.ru

Спасибо большое!
Прикрепления: 4340184.jpg (129.3 Kb) · 3030249.jpg (133.6 Kb)
Сообщение отредактировал RONALDINHO08 - Вторник, 27 Дек 2011, 04:18:54
Miss_Esq
Сообщений: 13859
Репутация: 4159
Уровень замечаний:

Сообщение # 214 | 10:39:43
RONALDINHO08, Пропишите Doctype в общих настройках ..

Bumer_2
Сообщений: 37
Репутация: 0

Сообщение # 215 | 14:58:05
Miss_Esq,В каком смысле от уда? Он из шаблона,шаблон какой скинуть? и я попробовал убрать ничего не изменилось,щас конечно стоит все то же.
Скрипты вы говорите в заголовке я в интернете вычитал что так вставляют скрипты, и например как заменить сам скрипт вы имеете ввиду?
Сообщение отредактировал Bumer_2 - Вторник, 27 Дек 2011, 14:59:38
Miss_Esq
Сообщений: 13859
Репутация: 4159
Уровень замечаний:

Сообщение # 216 | 15:03:27
Bumer_2, Шаблон вида материалов каталога файлов ...

Bumer_2
Сообщений: 37
Репутация: 0

Сообщение # 217 | 15:04:23
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">
Miss_Esq
Сообщений: 13859
Репутация: 4159
Уровень замечаний:

Сообщение # 218 | 15:07:12
Bumer_2, surprised Это такой шаблон вида материалов ???? Ужас и ну тогда ни чего удивительного , щас подправим и попробуете ..

Сообщение отредактировал Miss_Esq - Вторник, 27 Дек 2011, 15:10:52
Bumer_2
Сообщений: 37
Репутация: 0

Сообщение # 219 | 15:10:01
Да это такой вид.Можно узнать этот скрипт нужен?
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
Miss_Esq
Сообщений: 13859
Репутация: 4159
Уровень замечаний:

Сообщение # 220 | 15:11:59
Bumer_2,
Quote
Можно узнать этот скрипт нужен?
для добавления страницы в закладки , судя по содержанию ..

Quote
а то напросто их уберу.
Просто перед ними напишите <!--- а после них ---> , скрипты будут деактивированы , после того как всё приведёте в порядок и всё будет работать , убедитесь что они не нужны , тогда и удалите ...

То что выделено цветом скорее всего так же нужно выбросить ..


Сообщение отредактировал Miss_Esq - Вторник, 27 Дек 2011, 15:27:27
RONALDINHO08
Сообщений: 15
Репутация: 22

Сообщение # 221 | 15:33:01
Miss_Esq, Можно немного подробнее? Что именно там прописать? Какой код?
Сообщение отредактировал RONALDINHO08 - Вторник, 27 Дек 2011, 15:33:10
Miss_Esq
Сообщений: 13859
Репутация: 4159
Уровень замечаний:

Сообщение # 222 | 15:58:01
RONALDINHO08, Панель управления - Админ бар - Общее - Общие настройки

Внизу поле ввода Значение тега <!DOCTYPE>: туда и написать ...
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Сохранить , всё ..

RONALDINHO08
Сообщений: 15
Репутация: 22

Сообщение # 223 | 16:10:59
Miss_Esq, Спасибо большое за помощь! Всё работает отлично!!!! smile happy
Mirabel
Сообщений: 25
Репутация: 15

Сообщение # 224 | 23:16:58
Работала с дизайном в Опере, а когда открыла результат в Мозилле Файерфокс, выяснилось, что в лисичке получившийся дизайн отражается не так, как задумывалось и каков он в Опере. Прошу помочь исправить отображение в Мозилле.

Адрес сайта: http://altengland.ucoz.ru/forum

Описание отличий:

Сообщение отредактировал Mirabel - Среда, 28 Дек 2011, 00:36:03
Miss_Esq
Сообщений: 13859
Репутация: 4159
Уровень замечаний:

Сообщение # 225 | 01:50:40
Mirabel, то как показывает в Mozilla FireFox это настоящее отображение , глючит у вас в Opera , как раз ... как это не печально ..

Вы как трактуете например этот цвет ?? <font color="DeepSkyBlue4" >Друзья "Старой доброй Англии" ...

А заголовок шаблона просто , в шоке .. цвет оранжевокрасный это как ???



Короче говоря , исправляйте ошибки CSS и стилей , везде , по всему сайту , по всем шаблонами ...

Не все обозреватели особо продвинутые в трактовке текстовых написаний значений цвета .. смените на иную форму записи значения - #XXXXXX

Сообщение отредактировал Miss_Esq - Среда, 28 Дек 2011, 01:59:28
Поиск:
Telegram
Будьте в курсе всех обновлений: подпишитесь на наш официальный Telegram-канал uCoz и задавайте вопросы в чате сообщества!