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

Сообщение # 451 | 13:05:23
В ИЕ логотип сайта отображается с белыми границами, в других браузерах этой проблемы нет. Как-то можно это изменить? DOCTYPE прописан, но это не помогло.

Сайт: http://3d-concept.ru/
Сообщение отредактировал Karina9440 - Вторник, 13 Мар 2012, 14:00:39
Miss_Esq
Сообщений: 13859
Репутация: 4159
Уровень замечаний:

Сообщение # 452 | 16:24:05
Karina9440, В стиле логотипа дописать - border: 0px;

GeR@In
Сообщений: 141
Репутация: 19

Сообщение # 453 | 05:39:50
Karina9440, добавьте этот код в шаблон

Code
<body style="margin: 0px; padding: 0px;">

Более 100 бесплатных, внешних ссылок на ваш сайт. подробности
Сообщение отредактировал GeR@In - Среда, 14 Мар 2012, 05:40:32
Karina9440
Сообщений: 5
Репутация: 0

Сообщение # 454 | 07:38:22
Спасибо за подсказку! Приписала в верхней части сайта, в лого border="0", и ИЕ сдался.
olegsuv
Сообщений: 1365
Репутация: 127

Сообщение # 455 | 15:16:55
Quote (Karina9440)
Приписала в верхней части сайта, в лого border="0"

Костыли такие костыли.
Code
a img {border: none;}

Любые работы по:
- Javascript, jQuery, HTML, CSS
- Верстке макетов и установке их на сайты
- Нестандартным решениям
Admin2966
Сообщений: 19
Репутация: 0

Сообщение # 456 | 16:58:57
Доброго времени суток! у меня вот такая проблема при изменении масштаба страниц разезжаются блоки с видом материала (материалы выведены в три колонки с помощью <div style="float:left;width:33%;height:100%;overflow:hidden;"> прописанного в виде материалов) фактически проблема втом что на разных разрешениях экрана разный вид сайта, не пропорционально увеличивается картинка и текст в материале. подскажите пожалуйста как исправить эту проблему http://www.santehtop.by
Сообщение отредактировал Admin2966 - Воскресенье, 18 Мар 2012, 17:07:49
Primer
Сообщений: 41
Репутация: 9

Сообщение # 457 | 13:51:36
Всем привет!
У меня в ИЕ на сайте не виден футер, точнее он белый и иногда когда страница долго грузиться то его видно потом пропадает, в других браузерах все нормально, такая же проблема с формой добавления комментариев, скажите в чем проблема? Вот сайт http://www.kinotorka.ru
fflesh
Сообщений: 1784
Репутация: 1314

Сообщение # 458 | 13:53:36
Primer,
Quote (Primer)
такая же проблема с формой добавления комментариев, скажите в чем проблема?

Проблема в ИЕ )))))))))))))))))
...

Всё написанное выше - моё личное мнение и на абсолютную правоту не претендует.
Есть вопросы лично ко мне - пиши сюда: http://likbezz.ru/forum/8
Primer
Сообщений: 41
Репутация: 9

Сообщение # 459 | 15:32:20
Quote (Primer)
Всем привет!
У меня в ИЕ на сайте не виден футер, точнее он белый и иногда когда страница долго грузиться то его видно потом пропадает, в других браузерах все нормально, такая же проблема с формой добавления комментариев, скажите в чем проблема? Вот сайт http://www.kinotorka.ru


Так что никто ничем не поможет что ли?
malroz
Сообщений: 202
Репутация: 39
Уровень замечаний:

Сообщение # 460 | 15:41:33
Здравствуйте, обнаружил проблемку: когда заходишь в каталог статей (я переименовал в Программы OS X...) , нажимаю на материал, открывается страница с материалом и весь правый блок (который с часами...) переносится в конец материала в лево!!! То же самое происходит и и когда захожу в Блог (переименован в Советыпо OS X...)! Помогите, плиз, решить проблему!
Заранее благодарен.

проблема

P.S. Это не проблема браузера! Проверял в сафари и хром...Этот баг происходит на компе iMac 20" с разрешением 1680х1050, может дело все в разрешении (где-то в CSS оно прописано меньше?)??? Так же на этом iMac у меня и шапка сайта смотрится короткой! А вот на ноутбуке 15" ни каких багов не наблюдается и шапка по всей длине сайта!!!

P.P.S. Все я понял из-за чего это: реклам юкоз так растягивает сайт в ширину, когда я вхожу как админ (нажимаю на клозе и правый блок на месте! Но почему только в этих двух модулях, а в остальных все нормально?), возможно ли, не оплачивая удаление рекламы юкоз, решить эту проблему? например, размер этого рекламного блока изменить?
Ну вот про шапку сайта пока решения нет! Может кто подскажет?

P.P.P.S. Пока ждал ответа, сам и шапочку подстроил...Большая просьба - посмотрите (у кого какие браузеры и размеры мониторов) как шапка смотрится, есть ли косяки?? Я на ноуте глянул через несколько браузеров, только в IE небольшой косячек (шапочка разошлась в разные стороны на пару сантиметров), доктайп устанавливать не хочется ( да и поможет ли?), опять что-нибудь слетит!

мой сайт http://malroz.ru/
Сообщение отредактировал malroz - Пятница, 23 Мар 2012, 21:10:36
olegsuv
Сообщений: 1365
Репутация: 127

Сообщение # 461 | 16:02:29

Любые работы по:
- Javascript, jQuery, HTML, CSS
- Верстке макетов и установке их на сайты
- Нестандартным решениям
Miss_Esq
Сообщений: 13859
Репутация: 4159
Уровень замечаний:

Сообщение # 462 | 17:43:04
Primer,
Quote
Так что никто ничем не поможет что ли?
Какая версия IE ????

j-63
Сообщений: 35
Репутация: 2

Сообщение # 463 | 00:55:13
Почему в IE 6 появляется горизонтальная полоса прокрутки причем бесконечная чем дальше крутишь чем дальше уходишь от сайта и не отображается реклама юкозовская, вот сайт http://probapl.ucoz.ru
подскажите пожалуйста уже не знаю что делать

Добавлено (24-Мар-2012, 00:47:35)
---------------------------------------------
понял проблему дело в баннере юкоз ели его сделать слева то полоса пропадает, этот баннер неправильно отображается и закрыть его нельзя,что делать?

Добавлено (24-Мар-2012, 00:55:13)
---------------------------------------------
Щас полазил по другим сайтам юкоз, на которых был на всех реклама не работает и портит дизайн как это исправить

fflesh
Сообщений: 1784
Репутация: 1314

Сообщение # 464 | 00:55:25
j-63,
Quote (j-63)
Почему в IE 6 появляется горизонтальная полоса прокрутки причем бесконечная чем дальше крутишь чем дальше уходишь от сайта и не отображается реклама юкозовская

Это от верхнего банера.
...
Quote (j-63)
акрыть его нельзя,что делать?

Я уже писал ответ на идентичный вопрос - поищи.

Всё написанное выше - моё личное мнение и на абсолютную правоту не претендует.
Есть вопросы лично ко мне - пиши сюда: http://likbezz.ru/forum/8
Сообщение отредактировал fflesh - Суббота, 24 Мар 2012, 01:22:38
j-63
Сообщений: 35
Репутация: 2

Сообщение # 465 | 01:03:51
Quote (fflesh)
Я уже писал ответ на похожий вопрос - поищи.

скажи еще раз или дай ссылку,пожалуйста, уже с этой проблемой неделю мучаюсь вот только на верный путь встал как ее решить,а то до этого думал что то с DOCTYPE

Добавлено (24-Мар-2012, 01:03:51)
---------------------------------------------
я просто не знаю как искать ,то есть по каким словам

Поиск: