Оптимизация дизайна под разные браузеры - Страница 4

Страница 4 из 61 « 1 2 3 4 5 6 … 60 61 »
Модератор форума: Yuri_G

Оптимизация дизайна под разные браузеры

Модератор форума

Сообщение # 1 | 22:12:11 17 Апр 2007

Зачем нужен "правильный" HTML-код?

HTML - это специальный язык разметки для веб-страниц. Этот язык стандартизован. Значения каждого тега строго определены. Каждый тег имеет определенные атрибуты. HTML-код страницы интерпретируется браузерами и переводится в изображение веб-страницы, которое видит пользователь.

Теперь представьте, что HTML код страницы содержит ошибки (не соответствует стандарту). Что в этом случае делать браузеру?

Самый простой вариант - это вывести на экран сообщение об ошибке и все. Однако пользователь вряд ли будет рад увидеть вместо страницы, на которой пропущен закрывающийся тег, сообщение об ошибке. Поэтому создатели браузеров пошли другим путем. Браузеры пытаются (в меру своей интеллектуальности) "исправить" некорректный HTML-код.

Вот тут и кроется проблема. Каждый браузер имеет свои правила, по которым он будет исправлять HTML ошибки на веб-страницах. Поэтому, если на странице есть ошибки, то существует большая вероятность, что данная страница в разных браузерах будет выглядеть по-разному. Более того, если даже он сейчас выглядит одинаково во всех браузерах, это не значит, что так будет всегда. С выходом новой версии какого-либо браузера коррекция HTML ошибок может быть изменена. А вот следование стандартам изменено вряд ли будет.

Если вы хотите, чтобы ваш сайт выглядел одинаково в самых популярных браузерах, постарайтесь избежать ошибок в HTML коде.

В общем, бывает когда есть сайт, есть дизайн, но вот проблема - неизвестно, как он выглядит на других браузерах. Те, кто попроще, просто отписываются, что проверил на таком-то браузере, на других - не знаю.

Эта тема для того, чтобы обнаруживать косяки в разных браузерах. Также и проблема оптимизации и предложения по устранении ошибок (только советы, не просите других делать за вас работу)

Проблема с отображением тега HR

Советую вместо

Code

<hr>

который красиво может выглядить только в ИЕ использовать цветную однопиксельную картинку:

Code

и прописать ее в стилях:

Code

.hr {height: 1px; width: 100%; margin-top: 5px; margin-bottom: 5px;}

Разное понимание 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">

<script type="text/javascript" src="/img/global.js"></script>
</head>

Надеюсь понятно объяснил.

Решаем проблему с прозрачностью картинок PNG в ИЕ: http://www.tigir.com/alpha_png.htm

Miss_Esq

Сообщений: 13859

Репутация: 4159

Уровень замечаний:

Сообщение # 46 | 21:22:52 09 Сен 2011

AKIM, Прописывайте Doctype в общих настройках .. Иначе адекватного отображения в IE 8 - 9 не ждите ..

Quote

на все страницы

Какие именно , вроде во всех обозревателях одинаково ..

geometriya ISO 3166-2 DEE

Сообщение отредактировал Miss_Esq - Пятница, 09 Сен 2011, 21:37:52

AKIM

Сообщений: 12

Репутация: 12

Уровень замечаний:

Сообщение # 47 | 21:26:58 09 Сен 2011

Miss_Esq, все спс поставил этот <!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">
<html xmlns="http://www.w3.org/1999/xhtml"> сначало все гуд было а потом почему то слетело, но я его не прописывал в общих настройках а вписывал вручную
сейчас прописал в общих и все норм стало еще раз спс

hrantabe

Сообщений: 10

Репутация: 0

Сообщение # 48 | 12:19:44 24 Сен 2011

А не скажите как указать срок кеширования изображений ?

Сообщение отредактировал hrantabe - Суббота, 24 Сен 2011, 12:19:57

Miss_Esq

Сообщений: 13859

Репутация: 4159

Уровень замечаний:

Сообщение # 49 | 12:53:51 24 Сен 2011

hrantabe, срок кеширования изображений где ?

geometriya ISO 3166-2 DEE

hrantabe

Сообщений: 10

Репутация: 0

Сообщение # 50 | 15:11:01 24 Сен 2011

например на шапке моего сайта

И
ЭТО
я хочу срок кеширования указать на 1 неделю

Сообщение отредактировал hrantabe - Суббота, 24 Сен 2011, 15:12:45

Miss_Esq

Сообщений: 13859

Репутация: 4159

Уровень замечаний:

Сообщение # 51 | 15:17:01 24 Сен 2011

hrantabe,

Quote

срок кеширования указать на 1 неделю

Кэширования где и зачем , что то смысл вашего замысла не уловила ...

geometriya ISO 3166-2 DEE

Bodia

Сообщений: 11

Репутация: 16

Сообщение # 52 | 16:00:33 24 Сен 2011

В Опере, Хроме, Сафари видео отображается нормально, но В МОЗИЛЕ оно находится в правой стороне сайта:

Вот код страницы:

Code

<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>$ENTRY_TITLE$ - $CAT_NAME$ - $SITE_NAME$</title>
<link rel="stylesheet" href="/css/reset.css" type="text/css" media="screen" />
<link rel="stylesheet" href="/css/style.css" type="text/css" media="screen" />
</head>


<body id="home">
<style type="text/css">
@import url('/css/ajax_window.css') all;
</style>
$GLOBAL_AHEADER$

<div class="new-post">
<div class="date">
<div class="main">
<div class="rightside">
<span>$ADD_DATE$</span>
</div> </div>
</div>
   <b><span style="font-size:12pt">$ENTRY_TITLE$$MODER_PANEL$</span></b>
<p class="info">Добавил <a href="$PERSONAL_PAGE_LINK$">$USER$</a> | Комментариев $COMMENTS_NUM$ | Категория <a href="$CAT_URL$">$CAT_NAME$</a></p>
  </div>
<div id="post-content">
  <table style="border-collapse: collapse; width: 90%" width="" align="center"><tbody><tr align="center"><td style="" colspan="1"> <table style="border-collapse:collapse;width:100%;"><tbody><tr><td><center><br><object id="videoplayer" type="application/x-shockwave-flash" data="/player/uppod.swf" width="640" height="395"><param name="allowFullScreen" value="true"><param name="allowScriptAccess" value="always"><param name="wmode" value="transparent"><param name="movie" value="/player/uppod.swf"><param name="flashvars" value="comment=$ENTRY_TITLE$&st=/player/video48-1960.txt&file=$RFILE_DIRECT_URL$"></object></center></td></tr></tbody></table></td></tr><tr align="center"><td><span style="color:gray">$MESSAGE$</span><br></td></tr></tbody></table>
  <center> <table width="" cellspacing="0" cellpadding="0" style="width: 90%" align="">
  <tbody><tr><td width="13" colspan="2" style="width: 67%; letter-spacing: 0px; word-spacing: 0px">
<img src="http://wrestler.at.ua/icon/tag.png" alt="Теги"> <span style="font-size:7pt;"><noindex>Теги: $TAGS$</noindex></span>
<br></td><td align="right" style="font-size:7pt;color:gray;"> Источник: <noindex><a rel="nofollow" href="http://www.youtube.com" target="_blank"><u>YouTube</u></a></noindex></td></tr>
  <tr><td style="" colspan="2"><table style="margin-top: 5px; margin-right: 0px; margin-bottom: 5px; margin-left: 0px; border-top-color: rgb(153, 153, 153); border-left-color: rgb(153, 153, 153); border-right-color: rgb(153, 153, 153); border-bottom-color: rgb(153, 153, 153); border-top-width: 1px; border-left-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-top-style: solid; border-left-style: solid; border-right-style: solid; border-bottom-style: solid; background-position: 0% 0%; background-size: auto; background-color: rgb(226, 226, 226); background-repeat: repeat; width: 100%; background-origin: padding-box; background-attachment: scroll; background-image: none; background-clip: border-box" width="" cellpadding="1" cellspacing="1" align="">
<tbody><tr><td class="gTableBody1" width="25%">HTML-код:</td><td class="gTableBody1" width="50%" style="width: 67%; letter-spacing: 0px; word-spacing: 0px"><br>
<script type="text/javascript">
document.write('<input onclick="select(this)" type="text" value="<a href='+window.location+'>$ENTRY_TITLE$</a>" size="50"> ')
</script>
</td></tr>
<tr><td class="gTableBody1" width="25%">BB-код:</td><td class="gTableBody1" width="50%"><br>
<script type="text/javascript">
document.write('<input onclick="select(this)" type="text" value="[url='+window.location+']$ENTRY_TITLE$[/url]" size="50"> ')
</script>
</td></tr>
<tr><td class="gTableBody1" width="25%">Прямая ссылка:</td><td class="gTableBody1" width="50%">
<script type="text/javascript">
document.write('<input onclick="select(this)" type="text" value="'+window.location+' "size="50">')
</script>
</td></tr>
  </tbody></table></td><td style="font-size:7pt;color:gray;" colspan="1"><table style="width: 100%; border-collapse: collapse" width="" align="center"><tbody><tr><td style="text-align: center; letter-spacing: 0px; word-spacing: 0px"><font color="#a9a9a9">Оцените данное видео:</font><br><font color="#a9a9a9"><br></font></td></tr><tr><td style="text-align: center; letter-spacing: 0px; word-spacing: 0px"><center><?$RSTARS$('12','/.s/img/stars/3/12.png','1','float')?> </center>
</td></tr><tr><td style="text-align: center; letter-spacing: 0px; word-spacing: 0px"> <?if($RATING$)?> <b><span id="entRating$ID$">$RATING$</span></b>/<b><span id="entRated$ID$">$RATED$</span></b><?endif?></td></tr></tbody></table></td></tr></tbody></table><table style="border-collapse: collapse; width: 90%" width="" align="center"><tbody><tr><td><?$WIDGET$('45','187|2|0|0|1|ru|0|0|1|0|1|1|1|0|0|0|0|0|1|1|1|1')?></td></tr></tbody></table>
  <br>
  <table style="border-collapse: collapse; width: 90%" width="" align="center"><tbody><tr><td>Количество просмотров: <b>$READS$</b>    </td><td>Комментариев добавлено: <b>$COMMENTS_NUM$</b></td></tr></tbody></table> 
</div> 
$GLOBAL_CLEFTER$
$GLOBAL_BFOOTER$
  <script>$POWERED_BY$</script>
</body>
</html>

Вот одна из страниц - http://wrestler.at.ua/load....-1-0-21

Что же не так???

hrantabe

Сообщений: 10

Репутация: 0

Сообщение # 53 | 16:36:04 24 Сен 2011

я хочу чтобы браузеры кешировали эти изображения , чтобы каждый раз не загружали их сново

webanet

Сообщений: 24067

Репутация: 4985

Сообщение # 54 | 16:44:11 24 Сен 2011

Bodia, уберите это

Quote

Quote

<table style="border-collapse: collapse; width: 90%" width="" align="center"><tbody><tr align="center"><td style="" colspan="1"> <table style="border-collapse:collapse;width:100%;"><tbody><tr><td><center><br><object id="videoplayer" type="application/x-shockwave-flash" data="/player/uppod.swf" width="640" height="395"><param name="allowFullScreen" value="true"><param name="allowScriptAccess" value="always"><param name="wmode" value="transparent"><param name="movie" value="/player/uppod.swf"><param name="flashvars" value="comment=Кровавая схватка (Ортоном и Коди) 09.09.2011&st=/player/video48-1960.txt&file=http://www.youtube.com/watch?v=zFHlouvzjOY&feature=related"></object></center></td></tr></tbody></table></td></tr><tr align="center"><td><span style="color:gray">Все таки WWW выложило продолжение кровавой схватки между Ортоном и Коди</span><br></td></tr></tbody></table>
<center> <table width="" cellspacing="0" cellpadding="0" style="width: 90%" align="">
<tbody><tr><td width="13" colspan="2" style="width: 67%; letter-spacing: 0px; word-spacing: 0px">

зачем таблицы в таблицах ? вставляйте в поле только плеер. или берите ссылку на ютуб и подключайте через мультимедиа

ТУТ можно оставить своё мнение по любому вопросу
https://webanetlabs.net/

Miss_Esq

Сообщений: 13859

Репутация: 4159

Уровень замечаний:

Сообщение # 55 | 16:44:21 24 Сен 2011

hrantabe, Обозреватели и так , по умолчанию , кэшируют изображения и MP3 и FLV и AVI и скрипты и прочее прочее прочее ... Если вы не включили опцию обозревателя типа - " Автоматическая очистка КЭШ по завершению сеанаса .. " или что то вроде такого , то всё КЭШИРУЕТСЯ и остаётся в КЭШ до следующего раза .....

geometriya ISO 3166-2 DEE

Сообщение отредактировал Miss_Esq - Суббота, 24 Сен 2011, 16:45:51