Чат сообщества
   | |
| Модератор форума: Yuri_G |
| Сообщество uCoz Мастерская uCoz Дизайн: управление шаблонами Оптимизация дизайна под разные браузеры |
| Оптимизация дизайна под разные браузеры |
|
Зачем нужен "правильный" 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 |
|
Добрый день ,устал ломать голову,как сделать шапку сайта "резиновой" что бы она подстраивалась под разные размеры экрана,вод код моего верхнего глобального блока
<br> <table border="0" cellpadding="0" cellspacing="0" height="240" width="100%" style="background:url('http://betonka64.ucoz.ru/123.jpg') #000000;"> <tbody><tr> <td><table cellpadding="0" cellspacing="0" border="0" height="240"><tbody><tr><td height="40" style="padding-left:20px;color:#СССССС;">$WDAY$, $DATE$, $TIME$<br><?if($USERS_ON$)?><?if($USER_LOGGED_IN$)?><!--<s5200>-->Вы вошли как<!--</s>--> <a href="$PERSONAL_PAGE_LINK$"><b>$USERNAME$</b></a> | <!--<s3167>-->Группа<!--</s>--> "<u>$USER_GROUP$</u>"<?else?><!--<s5212>-->Приветствую Вас<!--</s>--> <b>$USERNAME$</b><?endif?><?endif?> <?if($RSS_LINK$)?>| <a href="$RSS_LINK$">RSS</a><?endif?></td></tr><tr align="center"><td height="200" style="padding-top:70px;padding-left:100px;"></td></tr></tbody></table></td> <td width="250" style="background:url('http://betonka64.ucoz.ru/88.jpg');" valign="top" align="right"> <div style="padding-top:13px;padding-right:87px;"><a href="$HOME_PAGE_LINK$" title="Главная"><img src="http://betonka64.ucoz.ru/Home.png" border="0" alt="Главная"></a></div> <div style="padding-top:29px;padding-right:70px;"><?if($USERS_ON$)?><?if($USER_LOGGED_IN$)?><a href="$PERSONAL_PAGE_LINK$" title="Мой профиль"><img src="http://betonka64.ucoz.ru/Profile.png" border="0" alt="Мой профиль"></a><?else?><a href="$REGISTER_LINK$" title="Регистрация"><img src="http://betonka64.ucoz.ru/Help.png" border="0" alt="Регистрация"></a><?endif?><?endif?></div> <div style="padding-top:32px;padding-right:62px;"><?if($USERS_ON$)?><?if($USER_LOGGED_IN$)?><a href="$LOGOUT_LINK$" title="Выход"><img src="http://betonka64.ucoz.ru/Exit.png" border="0" alt="Выход"></a><?else?><a href="$LOGIN_LINK$" title="Вход"><img src="http://betonka64.ucoz.ru/Upwards.png" border="0" alt="Вход"></a><?endif?><?endif?></div> </td> </tr> </tbody></table> |
|
|
|
Quote (Miss_Esq) Validol, Пропишите для начала Doctype в Общих настройках сайта.... ага вписал... <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> не помогло. либо шапка сайта велика под браузером опера а в хром все норма... |
|
Validol, Под какое разрешение сайт то сделали ? Минисальный размер принят по умолчанию - 1024px .....
|
|
Quote (Validol) ага вписал... <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> Doctype не только такой может быть. Почему Вы остановились именно на этом? Вот ещё несколько вариантов. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/transitional.dtd"> <!DOCTYPE html> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> Пробуйте. Мой сайт РемДомТех
|
|
Validol,
Quote xexe.su ... top.xexe.su |
|
Чего вдруг Opera делает отступ вместе с фоном страницы (background), если для body задан, например, margin:10px? И если даже берем содержимое body в div с таким отступом, то она делает отступы сверху и снизу вместе с фоном. Решил проблему задав div'у padding:10px, но это, елки, не совсем правильно, хотя, можно задать отступы и у самого содержимого, но ведь это лишняя морока. Ко всему, если страница меньше масштаба окна, то он отрезает фон внизу, решил установив содержимому min-height. Ещё бы не хватало сайты под оперу подгонять...
Сообщение отредактировал Komoff - Четверг, 08 Ноя 2012, 02:27:08
|
|
Quote то она делает отступы сверху и снизу вместе с фоном <body style="margin: 0px;"> <div style="margin: 10px;"> Должно быть одинаково во всех обозревателях ... Opera вообще в что то вываливается из линейки, разве что Safari хуже её ... |
|
Quote <div style="margin: 10px;"> Quote она делает отступы сверху и снизу вместе с фоном |
|
Ждать исправлений бесполезно, у оперы баги с outline в комбинации с z-index ещё с внедрения CSS 2.1 остались неисправленными
|
|
Здравствуйте у меня такая вот проблема,не знаю от куда появилась как ее убрать?
 Мой сайт http://stalker-lost.ru/ |
|
Добрый день!
У меня сайт uralec.ru во всех браузерах нормально открывается, а в IE главную станицу обрезает и меню не выдает. Из-за чего это может быть? Если с главной страницы убрать ~LastNews~ то тогда меню появляется. Но это не выход. P.S. Удалил одну из новостей (на которой IE обрезал страницу) все стало работать и открываться нормально. Так-что проблема решена. Сообщение отредактировал uec - Среда, 21 Ноя 2012, 15:52:27
|
|
Всем Доброго времени суток! На стандартном шаблоне ucoz создал сайт fcloko.com/ сам его переделал, но как обычно из-за не знания всех тонкостей итог таков:
IE - вообще криво отображается, Мозила - отлично (т.к. по ней и делаю и проверяю с помощью firebug Опера - Вроде тоже хорошо Хром - есть не большие косяки. В общих настройках менял !DOCTYPE разные вставлял не помогло. Что можете посоветовать? Где что ни так? |
|
papa_aa,
Quote IE - вообще криво отображается |
| |||
Будьте в курсе всех обновлений: подпишитесь на наш официальный Telegram-канал uCoz и задавайте вопросы в чате сообщества!