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

Страница 8 из 61 « 1 2 … 6 7 8 9 10 … 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

Admin2145

Сообщений: 10

Репутация: 0

Сообщение # 106 | 11:15:01 06 Окт 2011

Кто поможет с тем, что мой сайт не отоброжается в IE и, возможно, в других браузерах.

fleshshka

Сообщений: 6

Репутация: 0

Сообщение # 107 | 08:31:00 08 Окт 2011

Прошу помочь.В фотоальбомах невозможно загрузить фотографии,ucoz говорит,что не выбрана категория ( хотя их выбираю ).Через ИЕ выложить получается,а через другие браузеры-нет (. Вот код страницы добавления фотографии:

Quote

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>$SITE_NAME$</title>
<SCRIPT LANGUAGE="JavaScript">
var div = document.getElementsByTagName('div')[0].style.display='NONE';
var div = document.getElementsByTagName('div')[1].style.display='NONE';
div.innerHTML = '';
</script>

<link href="/css/style.css" rel="stylesheet" type="text/css" />
</head>
<body id="portal_body">
<div id="portal_ipbwrapper">
<script type="text/javascript" src='/Lineage/clock000.js'></script>

<div id="portal_header">

<div id="portal_topmenu_left">
<div><a href="$HOME_PAGE_LINK$">Главная страница</a></div>

<div><img src='/Lineage/topmenu_.gif' border='0' alt='' /></div>
<div><a href="/news/ustav/2011-09-25-4">Устав</a></div>

<div><img src='/Lineage/topmenu_.gif' border='0' alt='' /></div>
<div><a href="/forum/9-8-1">Форма заявки</a></div>

<div><img src='/Lineage/topmenu_.gif' border='0' alt='' /></div>
<div><?if($REGISTER_LINK$)?><a href="$REGISTER_LINK$">Регистрация</a><?else?><a href="$PERSONAL_PAGE_LINK$">Личные данные</a><?endif?></div>
<div><img src='/Lineage/topmenu_.gif' border='0' alt='' /></div>
<div><?if($LOGIN_LINK$)?><a href="$LOGIN_LINK$">Вход в систему</a><?else?><a href="$LOGOUT_LINK$">Выход из системы</a><?endif?></div>

</div>

<div id='link_to_main'><a href="$HOME_PAGE_LINK$"></a></div>
<div id='link_to_main_too'><a href="$HOME_PAGE_LINK$"></a></div>

<div id="portal_menu_left">
<div><a href="/news/">Объявления</a></div>
<div><img src='/Lineage/menu_sep.gif' border='0' alt='' /></div>
<div><a href="/search/">Поиск</a></div>
<div><img src='/Lineage/menu_sep.gif' border='0' alt='' /></div>
<div><a href="/forum/">Форум</a></div>
</div>

<div id="portal_menu_right">
<div><a href="http://gorodvetrov.do.am/load/">Файлы</a></div>
<div><img src='/Lineage/menu_sep.gif' border='0' alt='' /></div>
<div><a href="/photo/">Галерея</a></div>
<div><img src='/Lineage/menu_sep.gif' border='0' alt='' /></div>
<div><a href="http://gorodvetrov.do.am/blog/"> Видео</a></div>
</div>

</div>
<div id="portal_content">
<table id="portal_table"><tr>
<a href="$HOME_PAGE_LINK$">Главная</a> » <a href="$MODULE_URL$">Фотоальбом</a> » $SECTION_NAME$ <hr />
$BODY$
</tr></table>
</div>
<div id="portal_bottom" >
<div id="portal_banner" >
$GLOBAL_BLOC$


</div>

<div align='center' class='copyright'>$POWERED_BY$</div>
</div>
</div>
</body>
</html>

Если выложила не то,что нужно,скажите

qethth

Сообщений: 4

Репутация: 2

Сообщение # 108 | 10:52:56 02 Ноя 2011

Сайт
Кто использует шаблон дизайна # 601 ???
Из за чего в браузере Google Chrome отображаются два прямоугольных окна-справа вверху и справа внизу?
Мозила,опера или другие поисковики отображают шаблон нормально.
Это проблема в таблице стилей???

Прикрепления: 4005233.jpg (24.7 Kb)

Сообщение отредактировал qethth - Среда, 02 Ноя 2011, 10:54:22

Danilich07

Сообщений: 1

Репутация: 2

Сообщение # 109 | 15:40:30 03 Ноя 2011

Ребята подскажите вот мой сайт так выглядит на Мозилле:

http://s017.radikal.ru/i443/1111/2b/a83f3999e53e.jpg

А вот так на Internet Explorer:

http://s52.radikal.ru/i138/1111/f6/625fbd5d3ad8.jpg

Подскажите в чем проблема. Я в приндципе допер в чем, в СSS что-то не так, а что именно...

NVT

Сообщений: 12

Репутация: 12

Сообщение # 110 | 09:57:52 10 Ноя 2011

помогите мне правильно изменить а то в мазиле одно а в экспортере другое,сам не понимаю что надо сделать

Miss_Esq

Сообщений: 13859

Репутация: 4159

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

Сообщение # 111 | 21:26:13 10 Ноя 2011

NVT, Писала вам уже , отвечено что нужно делать
1 . Прописать Doctype в общих настройках
2 . Убрать это - <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
3 Да и этот " хлам " совершенно ни к чему , такое впечатление что его откопали на раскопках пирамиды Хеопса ..

Quote

Danilich07,

Quote

А вот так на Internet Explorer:

Прописать Doctype в общих настройках , а потом уже и смотреть что получится ..

geometriya ISO 3166-2 DEE

Сообщение отредактировал Miss_Esq - Четверг, 10 Ноя 2011, 21:29:18

-angel-

Сообщений: 60

Репутация: 39

Сообщение # 112 | 18:33:09 20 Ноя 2011

Помогите решить проблему с position:fixed для Internet Explorer.
У меня есть такая строчка :
<a href="http://na-shary.ucoz.ru/gb/"><img src="/iconki/gb.png" title="Оставьте свой отзыв" border="0" style="position: fixed; left: 0px;"></a>
ставлю перед </body> . В мазиле всё нормально а в Internet Explorer (у меня 8 версия IE) кнопка посреди страницы .
Скриншот

Сайт

Прикрепления: 9332614.jpg (125.4 Kb)

Скрипты для сайта

Miss_Esq

Сообщений: 13859

Репутация: 4159

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

Сообщение # 113 | 18:41:45 20 Ноя 2011

-angel-, Doctype пропишите в общих настройках ...

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

geometriya ISO 3166-2 DEE

-angel-

Сообщений: 60

Репутация: 39

Сообщение # 114 | 18:56:08 20 Ноя 2011

Спасибо прописал эта проблема решена ,но появились другие с шаблоном

Скрипты для сайта

Diz6942

Сообщений: 16

Репутация: 10

Сообщение # 115 | 20:22:39 22 Ноя 2011

Здравствуйте! Подскажите как устранить проблему: в ИЕ всплывающее окошко с названием картинки появляется нормально. А в Мозиле - нет! Сайт

Добавлено (22-Ноя-2011, 20:22:39)
---------------------------------------------
Miss_Esq, Вы в этой теме чаще всех помогаете. А мне не хотите подсказать? smile

Miss_Esq

Сообщений: 13859

Репутация: 4159

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

Сообщение # 116 | 20:34:02 22 Ноя 2011

Diz6942,

Quote

Вы в этой теме чаще всех помогаете. А мне не хотите подсказать

Если бы в IE не работало это не вопрос , а у вас наоборот , это хуже , посмотрим ..

У вас изображения ссылки толко с тегом ALT

<img alt="Рубрика "Террасы, балконы, лоджии"" src="/glavnaya/90467594.jpg" height="150" width="190">

А всплывающая посказка выводится из тега title

<img alt="Террасы" title="Рубрика - Террасы, балконы, лоджии" src="/glavnaya/90467594.jpg" height="150" width="190">

А вот ALT лучше сократить до одного слова типа

alt="Лоджии" или alt="Балконы" или alt="Терассы"

geometriya ISO 3166-2 DEE

Сообщение отредактировал Miss_Esq - Вторник, 22 Ноя 2011, 20:48:01

Diz6942

Сообщений: 16

Репутация: 10

Сообщение # 117 | 21:53:03 22 Ноя 2011

Miss_Esq, спасибо.
Т.е. мне нужно сократить наименование картинок до одного слова?
Если так, то это ничего не изменило - поменяла название на первой картинке, а оно так и не появилось. sad

И тут возникает другая проблема: мне нужно подписывать изображения как минимум 3-4 слова... См.

Miss_Esq

Сообщений: 13859

Репутация: 4159

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

Сообщение # 118 | 21:59:17 22 Ноя 2011

Diz6942, Скажу проще ..

У вас написано

<img alt="title "Архитектура"" src="/glavnaya/26147556.jpg" height="150" width="190">

А вы напишите ссылку именно так и посмотрите что получится в разных обозревателях ...

<img alt="Архитектура" title="Архитектура и тому подобное и так далеееее" src="/glavnaya/26147556.jpg" height="150" width="190">

geometriya ISO 3166-2 DEE

Сообщение отредактировал Miss_Esq - Вторник, 22 Ноя 2011, 22:00:36