Модератор форума: 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
bgestate
Сообщений: 12
Репутация: 5

Сообщение # 136 | 15:01:51
Вынуждена обратиться к пользователям, т. к. от тех поддержки получила отписку sad

[color=red]Ошибка при просмотре в IE, как исправить???

Сведения об ошибке на веб-странице

Агент пользователя: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; .NET CLR 1.1.4322; .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729; InfoPath.3)
штамп времени: Mon, 28 Nov 2011 17:37:42 UTC

Сообщение: Недопустимый аргумент.
Строка: 388
Символ: 5
Код: 0
URI-код: http://www.bulgaria.seainvest.ru/.s/wid/16/simple_menu.js


[color=blue]Ответ тех. поддержки:

Ответ: Здравствуйте!
При просмотре страницы http://www.bulgaria.seainvest.ru/ с MSIE 8.0 указанная вами ошибка не была обнаружена.
Поступил: 28.11.2011, 21:39 | Ответил: Elena | Ответ дан: 28.11.2011, 22:37


Ошибка показывается желтым треугольником внизу страницы, но не только. Если сравнить отображение меню "недвижимость в болгарии", то в других браузерах оно динамичное (меняет цвет при наведении курсора), а IE статичное с выделенной верхней позицией "ахелой" и частично выделенным "ахтополь". Подскажите, пожалуйста, где ошибка, что надо исправить и в каком месте?
Miss_Esq
Сообщений: 13859
Репутация: 4159
Уровень замечаний:

Сообщение # 137 | 16:14:17
bgestate,
У вас меню глючит не только в IE 8 но и в IE 9 работет не так , явная несовместимость ...

Все ваши " спецэффекты меню " элементарно сделать без вашего глючного скрипта , с помощю jQuery переменной прозрачности по наведению и уводу курсора + CSS 2.1 ...
И ни каких глюков не будет ни в одном обозревателе . Упростится всё донельзя .. Чем проще тем лучше ..

Сообщение отредактировал Miss_Esq - Вторник, 29 Ноя 2011, 16:14:43
bgestate
Сообщений: 12
Репутация: 5

Сообщение # 138 | 17:17:34
Проблема в том, что лично я никакие скрипты на прописывала. Есть в рамках юкоза виджет "функциональность сайта" - "меню с эффектами", вот через этот виджет и сделали. Но проблема в том, что на этом сайте http://viprent.at.ua/ делали так же и все работает без ошибки, а здесь ошибка есть. Хотелось бы сохранить данный дизайн, но... в силу "скромных знаний", можно подробнее подсказать, пошагово, так сказать? Заранее сильно благодарю

heart
Da_VAS_rK
Сообщений: 1
Репутация: 0

Сообщение # 139 | 01:32:07
Зравствуйте! Возникла следующая проблема:

Стоит чат, не юкозовский. Каждое сообщение в поле вывода сообщ. отдельно оформляется небольшим облаком. Проблема заключается в следующем: при отображении длинных слов, которые не умещаются по длине, они разбиваются и их часть переносится на другую строку. Делал так:

word-break: break-all;
word-wrap: break-word;

На опере и хроме отображается всё как надо, а вот с мозиллой проблемы. Часть длинны слов переносит, а часть нет. Например кучу букв "е" не переносит, а растягивает блок на несколько символов, а потом только уже переносит.
Сообщение отредактировал Da_VAS_rK - Среда, 30 Ноя 2011, 15:56:23
Fox_Mulder51
Сообщений: 7
Репутация: -1

Сообщение # 140 | 20:03:04
Всем доброго времени суток! У меня возникла следующая проблема.
Поставил себе на сайт MK Legend, раскрывающееся меню.
Меню отлично работает в Opera, в остальных браузерах дизайн нарушен. В чём проблема?

Код Меню.

Code

<script type="text/javascript">  
   
  var persistmenu="yes"  
  var persisttype="sitewide"  
   
  if (document.getElementById){  
  document.write('<style type="text/css">\n')  
  document.write('.submenu{display: none;}\n')
  document.write('</style>\n')  
  }  
   
  function SwitchMenu(obj){  
  if(document.getElementById){  
  var el = document.getElementById(obj);  
  var ar = document.getElementById("masterdiv").getElementsByTagName("span");  
  if(el.style.display != "block"){  
  for (var i=0; i<ar.length; i++){  
  if (ar[i].className=="submenu")  
  ar[i].style.display = "none";  
  }  
  el.style.display = "block";  
  }else{  
  el.style.display = "none";  
  }  
  }  
  }  
   
  function get_cookie(Name) {  
  var search = Name + "="  
  var returnvalue = "";  
  if (document.cookie.length > 0) {  
  offset = document.cookie.indexOf(search)  
  if (offset != -1) {  
  offset += search.length  
  end = document.cookie.indexOf(";", offset);  
  if (end == -1) end = document.cookie.length;  
  returnvalue=unescape(document.cookie.substring(offset, end))  
  }  
  }  
  return returnvalue;  
  }  
   
  function onloadfunction(){  
  if (persistmenu=="yes"){  
  var cookiename=(persisttype=="sitewide")? "switchmenu" : window.location.pathname  
  var cookievalue=get_cookie(cookiename)  
  if (cookievalue!="")  
  document.getElementById(cookievalue).style.display="block"  
  }  
  }  
   
  function savemenustate(){  
  var inc=1, blockid=""  
  while (document.getElementById("sub"+inc)){  
  if (document.getElementById("sub"+inc).style.display=="block"){  
  blockid="sub"+inc  
  break  
  }  
  inc++  
  }  
  var cookiename=(persisttype=="sitewide")? "switchmenu" : window.location.pathname  
  var cookievalue=(persisttype=="sitewide")? blockid+";path=/" : blockid  
  document.cookie=cookiename+"="+cookievalue  
  }  
   
  if (window.addEventListener)  
  window.addEventListener("load", onloadfunction, false)  
  else if (window.attachEvent)  
  window.attachEvent("onload", onloadfunction)  
  else if (document.getElementById)  
  window.onload=onloadfunction  
   
  if (persistmenu=="yes" && document.getElementById)  
  window.onunload=savemenustate  
   

  </script>
   
  <div id="masterdiv">
   
  <div class="menutitle" onclick="SwitchMenu('sub2')"><img src="http://mklegend.ucoz.com/img/folder.gif" border="0" alt="" /> <b>Mortal Kombat II</b></div>
  <span class="submenu" id="sub2">  
  <ul>  
  <li><a href="http://mklegend.ucoz.com/index/info_mk2/0-63" class="menutitlesubmenu">Информация</a>
  <li><a href="http://mklegend.ucoz.com/index/story_mk2/0-64" class="menutitlesubmenu">Сюжет</a>
  <li><a href="http://mklegend.ucoz.com/index/characters_mk2/0-65" class="menutitlesubmenu">Персонажи</a>
  <li><a href="http://mklegend.ucoz.com/index/stages_mk2/0-66" class="menutitlesubmenu">Арены</a>
  <li><a href="http://mklegend.ucoz.com/index/secrets_mk2/0-67" class="menutitlesubmenu">Секреты</a>
  <li><a href="http://mklegend.ucoz.com/index/gallery_mk2/0-70" class="menutitlesubmenu">Галерея</a>
  </ul>  
  <center><img src="http://mklegend.ucoz.com/img/line_blood.png" border="0" alt="" /></center>  
  </span>
   
  <div class="menutitle" onclick="SwitchMenu('sub1')"><img src="http://mklegend.ucoz.com/img/folder.gif" border="0" alt="" /> <b>Mortal Kombat</b></div>
  <span class="submenu" id="sub1">  
  <ul>  
  <li><a href="http://mklegend.ucoz.com/index/info_mk/0-56" class="menutitlesubmenu">Информация</a>
  <li><a href="http://mklegend.ucoz.com/index/story_mk/0-57" class="menutitlesubmenu">Сюжет</a>
  <li><a href="http://mklegend.ucoz.com/index/characters_mk/0-58" class="menutitlesubmenu">Персонажи</a>
  <li><a href="http://mklegend.ucoz.com/index/stages_mk/0-59" class="menutitlesubmenu">Арены</a>
  <li><a href="http://mklegend.ucoz.com/index/mini_game_mk/0-60" class="menutitlesubmenu">Мини игра</a>
  <li><a href="http://mklegend.ucoz.com/index/secrets_mk/0-61" class="menutitlesubmenu">Секреты</a>
  <li><a href="http://mklegend.ucoz.com/index/gallery_mk/0-62" class="menutitlesubmenu">Галерея</a>
  </ul>
  <center><img src="http://mklegend.ucoz.com/img/line_blood.png" border="0" alt="" /></center>  
  </span>
  </div>
Miss_Esq
Сообщений: 13859
Репутация: 4159
Уровень замечаний:

Сообщение # 141 | 20:40:07
Fox_Mulder51,
Что то не вижу ни каких разрушений меню в IE 9 ...


А вот справа в колонке есть ..


А вообще то меню можно сделать и попроще на основе jQuery и совместимым со всеми обозревателями , без эдакого скрипта ....
Прикрепления: 8534006.jpg (13.6 Kb) · 4323606.jpg (17.5 Kb)

Сообщение отредактировал Miss_Esq - Воскресенье, 04 Дек 2011, 20:40:51
Fox_Mulder51
Сообщений: 7
Репутация: -1

Сообщение # 142 | 21:01:04
Miss_Esq, спасибо! Я вот всё на jQuery никак не могу сделать такое меню. В готовых скриптах что встречал, отсутсвовали куки. Когда переходил по страницам, меню сворачивалось каждый раз.
Miss_Esq
Сообщений: 13859
Репутация: 4159
Уровень замечаний:

Сообщение # 143 | 21:03:58
Fox_Mulder51,
Quote
меню сворачивалось каждый раз.
А смысл в развёрнутом меню ? после перехода ?

Fox_Mulder51
Сообщений: 7
Репутация: -1

Сообщение # 144 | 21:08:57
Quote (Miss_Esq)
А смысл в развёрнутом меню ? после перехода ?

Чтобы не разворачивать снова! happy
Сообщение отредактировал Fox_Mulder51 - Воскресенье, 04 Дек 2011, 21:09:11
Miss_Esq
Сообщений: 13859
Репутация: 4159
Уровень замечаний:

Сообщение # 145 | 21:15:59
Fox_Mulder51,
Quote
Чтобы не разворачивать снова
Создавать себе кучу проблем , потом героически их преодолевать только для того что бы лишний раз не клацнуть по меню ??
Ладно бы если было бы простое , совместимое решение , а так ... головная боль и ни чего более ...

Fox_Mulder51
Сообщений: 7
Репутация: -1

Сообщение # 146 | 21:18:57
Quote (Miss_Esq)
головная боль и ни чего более ...

Согласен
Fallen-star1999
Сообщений: 1
Репутация: 0

Сообщение # 147 | 21:20:43
У меня такая проблема. Скачал дизайн для сайта сделал! Всё ровно... А открыл в Эксплореле другой-кривой.
sch779
Сообщений: 703
Репутация: 348

Сообщение # 148 | 02:33:09
Quote (Miss_Esq)
Ладно бы если было бы простое , совместимое решение

А чем стандартный вариант с куками не совместимое решение?!
Да и разворачивание меню через jQuery тоже совместимое со всеми браузерами.
Miss_Esq
Сообщений: 13859
Репутация: 4159
Уровень замечаний:

Сообщение # 149 | 10:39:59
sch779,
Quote
А чем стандартный вариант с куками не совместимое решение
А если они убиваются в обозревателе сразу же как только ... , даже при обновлении страницы ? или блокируеся модификация ранее полученного ? по уровню безопасности и т п и т д ......
Да и в зависимости ои вариантов исполнения этой идеи часто она просто не работает , не запускать же ActivX по запросу обозревателя на всех сайтах подряд , так ведь можно и влипнуть ... Как попали Троянцы с деревянным конём ... smile
Ну вот и получается что то что просто так не работает на 100% ( почти ) , для меня не имеет смысла и совершенно бесполезно , а значит просто вредно ... мусор ..

Quote
Да и разворачивание меню через jQuery тоже совместимое со всеми браузерами
Собственно и не говорила что jQuery , мню в частности не совместимо . У меня на jQuery буквально сайт висит , меню уж тем более , давным давно на JQ ...

sch779
Сообщений: 703
Репутация: 348

Сообщение # 150 | 12:28:25
Quote (Miss_Esq)
А если они убиваются в обозревателе сразу же как только
Ну, извините - в этом случае ничего не поможет! Если пользователь не разрешает использовать куки, то это его проблема - без кук можно сохранить текущий профиль интерфейса только зареганного пользователя - во вспомогательных блоках или через php во внешней базе.

Quote (Miss_Esq)
Ну вот и получается что то что просто так не работает на 100% ( почти ) , для меня не имеет смысла и совершенно бесполезно , а значит просто вредно ... мусор ..
Quote (Miss_Esq)
У меня на jQuery буквально сайт висит
Вы противоречите сами себе! Если я отключу в браузере выполнение JS-кода, то и весь Ваш код на jQuery окажеться бесполезен - значит это мусор?!
Так что, имхо, совместимость технологии никак не может быть связана с настройками пользователя - в противном случае прийдется писать сайты на уровне прощлого века - без новинок CSS и без JS-кода, на чистом html без изысков - только тогда будет 100% совместимость!
Поиск:
Telegram
Будьте в курсе всех обновлений: подпишитесь на наш официальный Telegram-канал uCoz и задавайте вопросы в чате сообщества!