Модератор форума: 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
Уровень замечаний:

Сообщение # 811 | 07:29:41
makc33,
Цитата
мда, в IE вообще невозможно работать wacko еще и ругается, что страница просрочена.
Установите корректную версию IE 9 - IE 10 непосредственно с узла Microsoft ..

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

Сообщение # 812 | 12:57:14
Спасибо советы.
После глобальной чистки куков и кэша, а так же удаления навязчивых тул-баров от mail.ru - все вроде встало на свои места и работает. biggrin
Цитата (Miss_Esq)
Установите корректную версию IE 9 - IE 10 непосредственно с узла Microsoft ..
я бы с радостью, однако ан компе стоят программы для работы с 2 банками и у каждого своя криптозащита и работает только с IE. Пока не дают гарантии корректной работы с IE 9 или IE 10. Поэтому что есть, то есть.
Miss_Esq
Сообщений: 13859
Репутация: 4159
Уровень замечаний:

Сообщение # 813 | 17:45:04
makc33,
Цитата
Пока не дают гарантии корректной работы с IE 9 или IE 10
А опробовать и выяснить слабые места этой программы? IE 9 уже применяется более 1.5 лет, вовсю используется IE 10, не пора ли определиться или так и будите сидеть на устаревших версиях ??? Впрочем есть выход, для банковских операций использовать отдельный компьютер или поставить вторую систему на одном ...

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

Сообщение # 814 | 16:07:24
Подскажите в чём проблема. В Мозиле в Опере в Експлоере нормально, а вот в Хроме проблема на форуме такая: http://s6.hostingkartinok.com/uploads....c96.png

Съезжает так не постоянно, а через одно сообщение и не во всех темах. Подскажите в чём проблема и почему такой сдвиг в дизайне.

Вот ссылка на страницу этой темы: http://stalker-lost.ru/forum/155-1097-1#15544

По моему это потому что не оптимизирован дизайн под хром, но как оптимизировать понять не могу.
Сообщение отредактировал Alonir - Суббота, 30 Мар 2013, 16:08:56
brizing
Разработчик
Сообщений: 2556
Репутация: 1091

Сообщение # 815 | 20:49:09

http://peacekeepers.ucoz.ua/
Левая ячейка только при работе с мазиллой растягивается на всю высоту таблицы.
Мазилла у меня обновленная.

p.s. Схожая ситуация и с нижней частью сайта, где у меня информеры. Если убрать один из информеров, ширина выставится автоматически, хоть я кё фиксировал где нужно.

Добавлено (01 Апр 2013, 20:49:09)
---------------------------------------------
ну как данную ячейку сделать по высоте содержимого?


Читайте книги role.su - Rolesu Authors Workshop.
bandjuk
Сообщений: 6816
Репутация: 2398
Уровень замечаний:

Сообщение # 816 | 22:54:19
[Бриз], пропиши значение max-height
Прикрепления: 6386074.jpg (115.6 Kb)
Сообщение отредактировал bandjuk - Понедельник, 01 Апр 2013, 22:55:56
brizing
Разработчик
Сообщений: 2556
Репутация: 1091

Сообщение # 817 | 23:42:13
bandjuk, высота ячейки измеряется в тысячах пикселей, но вот:

Читайте книги role.su - Rolesu Authors Workshop.
Alonir
Сообщений: 7
Репутация: 4

Сообщение # 818 | 04:15:02
А мне что, никто помочь не может? //forum.ucoz.ru/forum/24-12259-1004323-16-1364645244
brizing
Разработчик
Сообщений: 2556
Репутация: 1091

Сообщение # 819 | 08:51:04
Alonir, ифреймы с видео сделайте на 6 пикселей уже, тобишь они должны быть width="470px"

Читайте книги role.su - Rolesu Authors Workshop.
Alonir
Сообщений: 7
Репутация: 4

Сообщение # 820 | 12:48:35
[Бриз], не совсем вас понял.. Можете по подробнее объяснить для плохо понимающих, то есть для меня. И ещё, вы правильно поняли хоть в чём проблема, просто я может не достоверно объяснил вам?
Сообщение отредактировал Alonir - Вторник, 02 Апр 2013, 14:16:12
brizing
Разработчик
Сообщений: 2556
Репутация: 1091

Сообщение # 821 | 18:04:17
Alonir, я правильно понял проблему, вы разместили в сообщениях видео. Размер проигрывателя на 6 пикселов шире, чем дозволено, вот и возникает баг в тех сообщениях, где присутствует этот проигрыватель.
Кстати можете сделать левый див на 6 пикселов уже, если вам это проще.

Читайте книги role.su - Rolesu Authors Workshop.
Alonir
Сообщений: 7
Репутация: 4

Сообщение # 822 | 18:08:29
[Бриз], теперь всё понятно. Благодарю за помощь.
R0MANbl4
Сообщений: 2
Репутация: 0

Сообщение # 823 | 14:48:20
Привет всем.

Подскажите новичку обновил винду установил браузеры и мозила и хром. появилась проблема перестал увеличивать картинки!!! http://www.foodsstore.ru/shop/1341/desc/moloko-sudarynja-2-5-1-litr
Пробывал яву устанвливать и флэш и файрвол отключал ничего не помогает!!!!!!!

Прошу дайте совет, Что делать, кто подскажет?
Stroim
Сообщений: 2
Репутация: 10

Сообщение # 824 | 22:27:15
Почему в Опере отображается нормально, а в IE уезжает вниз? http://www.izolyaciya.info/
Получается что меню остается на месте, а сам текст страницы уезжает вниз, как исправить и что прописать? Помогите пожалуйста smile
Miss_Esq
Сообщений: 13859
Репутация: 4159
Уровень замечаний:

Сообщение # 825 | 23:11:50
Stroim, В IE 10 ни чего ни куда не уезжает, но для профилактики пропишите Doctype в Общих настройках сайта ..

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