Модератор форума: 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
Miss_Esq
Сообщений: 13859
Репутация: 4159
Уровень замечаний:

Сообщение # 781 | 10:23:01
Zodiaq,
Цитата
Попробуйте в настройках Новостей и Каталога файлов поставить количество материалов на странице по максимуму.
Вы это пробовали ???

Вагнер-Р[eng]AV
Сообщений: 52
Репутация: 57

Сообщение # 782 | 11:33:22
Как в ИЕ теперь модно сделать текст с тенью? Источники говорят, что это возможно с помощью фильтров, но ни одна из конструкций вида:
Код
filter: Shadow(Color=#000000, Direction=45, Strength=4);
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=45);
или
filter: progid:DXImageTransform.Microsoft.DropShadow(color=#000000);

Никакого результата не принесли. Прошу помочь разобраться.

Miss_Esq
Сообщений: 13859
Репутация: 4159
Уровень замечаний:

Сообщение # 783 | 12:22:22
Вагнер-Р[eng]AV, "Тени" в IE имеют совершенно другой вид, если сравнивать с тенями CSS 3 ..

artlebedev.ru/tools/technogrette/html/filters-in-ie/

webcorp.ru/page/filt1.html

Сообщение отредактировал Miss_Esq - Среда, 16 Янв 2013, 12:40:59
Вагнер-Р[eng]AV
Сообщений: 52
Репутация: 57

Сообщение # 784 | 12:30:15
Miss_Esq, да мне лишь бы какую зацепку,.. чтобы оттенить белый текст на белом фоне. А в дальнейшем, надеюсь, доработаю.

Спасибо smile

Сообщение отредактировал Вагнер-Р[eng]AV - Среда, 16 Янв 2013, 12:46:02
Rums
Сообщений: 10
Репутация: 2

Сообщение # 785 | 22:50:23
Люди добрые, кому не сложно проверьте пожалуйста сайт на наличие ошибок и багов, а то я уже ничего не замечаю =)
Сразу пишите, какой браузер использовали при проверке
Если можно, напишите пару слов о недостатках и юзабилити! Заранее спасибо!!! happy
Miss_Esq
Сообщений: 13859
Репутация: 4159
Уровень замечаний:

Сообщение # 786 | 22:55:48
Ta-ta
Сообщений: 57
Репутация: 1

Сообщение # 787 | 01:23:09
Извините, уже все решила. Сообщение можно стереть.

Сообщение отредактировал Ta-ta - Воскресенье, 03 Фев 2013, 01:27:38
farhad979
Сообщений: 3
Репутация: 0

Сообщение # 788 | 13:20:35
Прошу помочь.....
Отображение сайтов в хроме и IE разное, а именно появилась окантовка шаблона, сайт http://yandex1.ucoz.ru/
Заранее огромное спасибо!!!!!
Miss_Esq
Сообщений: 13859
Репутация: 4159
Уровень замечаний:

Сообщение # 789 | 16:24:24
farhad979, Скриншот проблемы, в какой версии Internet Explorer проблема ? проверять нужно в Internet Explorer, Mozilla Firefox, Google Chrome, Opera

Написать в CSS

#mylogo {border: 0px; width: 100%; margin: 0px;}

А это из под шапки убрать

<style type="text/css">
#mylogo {width: 100%; margin: 0 0 0 0;}
</style>

Сообщение отредактировал Miss_Esq - Вторник, 05 Фев 2013, 16:29:03
farhad979
Сообщений: 3
Репутация: 0

Сообщение # 790 | 17:21:11
Не получается, убираю, и прописываю в CSS, картинка увеличивается и в IE то же самое (без изменений)
IE 9
Сообщение отредактировал farhad979 - Вторник, 05 Фев 2013, 17:22:34
Miss_Esq
Сообщений: 13859
Репутация: 4159
Уровень замечаний:

Сообщение # 791 | 17:26:26
farhad979, В моём IE 10 в шапке нет окантовки, исчезла, вам нужно почистить КЭШ IE 9 ..

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

Сообщение # 792 | 17:31:11
ОГРОМНОЕ СПАСИБО!!!!!!
bobka2
Сообщений: 146
Репутация: 21

Сообщение # 793 | 22:55:10
после создания второго контейнера заметил , что сайт не правильно отображается в браузере интернет эксплоер

сайт http://fotokulinary.ucoz.ru/ ,что можно сделать? прописал <!DOCTYPE> не помогает
Miss_Esq
Сообщений: 13859
Репутация: 4159
Уровень замечаний:

Сообщение # 794 | 07:52:09
bobka2,
Цитата
что можно сделать? прописал <!DOCTYPE> не помогает

Такого Doctype не Существует !!!!

Вот образцы типа ..

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> - для HTML стандарта

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> - для XHTML стандарта

<!DOCTYPE html> - для HTML 5

Monstar_1
Сообщений: 7
Репутация: 4

Сообщение # 795 | 09:09:01
Доброго времени суток, знатоки. ) В очередной раз прошу у вас помощи по сайту http://luxor24.ucoz.ruПроблема в том что, сайт у меня на моем компьютере отображается нормально, а вот у заказчика сайта почему то криво, помогите разобраться.

http://luxor24.ucoz.ru
Сообщение отредактировал Monstar_1 - Суббота, 09 Фев 2013, 09:09:24
Поиск:
Telegram
Будьте в курсе всех обновлений: подпишитесь на наш официальный Telegram-канал uCoz и задавайте вопросы в чате сообщества!