Чат сообщества
   | |
| Модератор форума: 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 |
|
sch779,
Quote Вы противоречите сами себе! Quote пользователь не разрешает использовать куки  Использовать можно по разному . В том числе и во вред и это не так уж и сложно .. Речь идёт не о JS а о использовании cookie , модификации .... Quote то это его проблема  Это не проблема а один из множества факторов позволивший , НЕ устанавливать Антивирусник вообще ... с 1 января 2011 года ... через месяц год как без KIS 2010 и ни какого поражения системы ...  Quote без новинок CSS и без JS-кода Quote html без изысков Сообщение отредактировал Miss_Esq - Вторник, 06 Дек 2011, 13:22:52
|
|
У меня на главной под шапкой поставлен скрипт бегущей строки. В IE (8 версия) работает не корректно. Захотела с помощью условных скрыть от таких посетителей.
Если ставлю условием только браузер <?if($USER_AGENT$='ie')?> <?else?> бегущая строка <?endif?> - то все нормально Но если ставлю двойное условие браузер+версия - <?if($USER_AGENT$='ie' and $USER_AGENT_VER$='8.0')?> <?else?>бегущая строка <?endif?> - то условие не срабатывает. Получается, что я неверно ставлю проверку на версию? Создаете сайт питомника? Вам нужен для него домен? - "имя".питомники.рф - в подарок!!!
|
|
Помогите пожалуйста разобраться с шапкой сайта. В mozila, opera все нормально, а вот в IE, элементы шапки не отображаются: нету картинок, баннера, блока поиска. Верхняя строка меню растянута по всей ширине, хотя в коде указано 75%. сайт
Code <style type="text/css"> </style> <table border="0" cellpadding="0" cellspacing="0" width="1200" align="center"> <tr> <td background="/.s/t/181/1.gif" rowspan="2"><img border="0" src="/.s/t/181/2.gif" width="46" height="1"></td> <td width="97%" class="mframe" valign="top" bgcolor="#FAFAFA"> <table width="100%" border="0" cellpadding="0" cellspacing="0" height="100%"> <tr> <td class="colgray" width="210" align="center" height="105"><img src="http://cw.at.ua/logo.png" border="0"></td> <td> <table align="left" bgcolor="#677E9A" style="padding-left:15px;padding-right:15px;" border="0" cellspacing="0" cellpadding="0" width="75%" height="25"> <tr> <td class="menuTd"><a class="menu1" href="http://cw.at.ua/index/0-2">Про нас</a></td> <td class="menuTd"><a class="menu1" href="http://cw.at.ua/index/oplata_ta_dostavka/0-4">Оплата та доставка</a></td> <td class="menuTd"><a class="menu1" href="http://cw.at.ua/index/garantijne_obslugovuvannja/0-5">Гарантія</a></td> <td class="menuTd"><a class="menu1" href="http://cw.at.ua/index/kredit/0-7">Кредит</a></td> <td class="menuTd"><a class="menu1" href="http://cw.at.ua/index/kontakti/0-11">Контакти</a></td> <td class="menuTd"><a class="menu1" href="http://cw.at.ua/index/0-3">Зв'язок</a></td> </tr> </table> <table width="100%" border="0" cellpadding="2" cellspacing="1"> <tr> <td width="150"><img src="http://cw.at.ua/kontakt.jpg"></td> <td ><script type="text/javascript" src="http://cw.at.ua/rtr/1-1"></script></td> <td width="210"> <?if($SEARCH_FORM$)?> <table border="0" cellpadding="2" cellspacing="1" width="100%"> <tr><td height="25" class="blocktitle" style="padding-left:15px;"><img border="0" src="/.s/t/181/4.gif" align="absmiddle" width="20" height="13"> <b><!-- <bt> --><!--<s3163>-->Пошук<!--</s>--><!-- </bt> --></b></td></tr> <tr><td style="padding-left:25px;"><div align="center"><!-- <bc> --><?if($MODULE_ID$=='shop')?>$MODULE_SEARCH_FORM$<?else?>$SEARCH_FORM$<?endif?><!-- </bc> --></div></td></tr></table> <?endif?> </td> </tr> </table> </td> </tr> <tr> <td bgcolor="#C9D0DB" align="center" class="colwhite" height="25"><font color="#FFFFFF"><b>$MODULE_NAME$</b></font></td> <td bgcolor="#677E9A" style="padding-left:15px;padding-right:15px;"> <table border="0" cellspacing="0" cellpadding="0"> <tr> <td class="menuTd"><a href="$HOME_PAGE_LINK$" class="menu1"><!--<s5176>-->Головна<!--</s>--></a></td> <?if($USERS_ON$)?><?if($USER_LOGGED_IN$)?><td class="menuTd"><a class="menu1" href="$PERSONAL_PAGE_LINK$"><!--<s5214>-->Мій профіль<!--</s>--></a></td><?else?><td class="menuTd"><a class="menu1" href="$REGISTER_LINK$"><!--<s3089>-->Регистрация<!--</s>--></a></td><?endif?><?endif?> <?if($USERS_ON$)?><?if($USER_LOGGED_IN$)?><td class="menuTd"><a class="menu1" href="$LOGOUT_LINK$"><!--<s5164>-->Вихід<!--</s>--></a></td><?else?><td class="menuTd"><a class="menu1" href="$LOGIN_LINK$"><!--<s3087>-->Вход<!--</s>--></a></td><?endif?><?endif?> </tr> </table> </td> </tr> </table> </td> <td background="/.s/t/181/5.gif" rowspan="2"><img border="0" src="/.s/t/181/2.gif" width="46" height="1"></td> </tr> </table> Сообщение отредактировал Osferon - Воскресенье, 11 Дек 2011, 05:02:09
|
|
Скажите пожалуйста,где и что нужно прописать,чтобы расстояние между словами было одинаковым при переносе на другую строку???Внизу две картинки:первая сделанна в i-explorer,вторая в firefox (здесь двойные пробелы)
Спасибо сайт:www.valentineblack.tk Прикрепления:
3438144.png
(299.5 Kb)
·
1751668.png
(297.9 Kb)
black
|
|
dj-vblack,
Quote Прикрепления: 3438144.png(299Kb) · 1751668.png(298Kb) В стилях текста напришите text-align: justify; Osferon, Quote а вот в IE, <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> Sultanka, В принципе всё правильно , помотрите так <?ifnot($USER_AGENT$='ie' and $USER_AGENT_VER$='8.0')?> БС <?endif?> А вообще есть jQuery БС , универсально , валидно , со всеми настройками ... runettex.clan.su/index/0-21 Сообщение отредактировал Miss_Esq - Понедельник, 12 Дек 2011, 10:36:04
|
|
Доброе время суток! Помогите разобраться в небольшой проблеме...
В каждом браузеры выглядит шрифт на сайте по разному., a в IE еще и картинки кривые заранее спасибо |
|
defaultNick1147,
Quote Помогите разобраться в небольшой проблеме... Для начала , напишите Doctype в Общих настройках сайта .. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> А вообще , шрифты , рамеры букв , интервалы и т п и т д , всегда разные у всех обозревателей , особенно этим выделяется Opera .... Сообщение отредактировал Miss_Esq - Понедельник, 12 Дек 2011, 13:24:22
|
|
dj-vblack,
Quote в какой части стилей CSS изменить стиль Сообщение отредактировал Miss_Esq - Вторник, 13 Дек 2011, 06:37:31
|
|
Quote (Miss_Esq) Конкретно , адрес сайта , страницы , где что не так ???? отображается .... В названии материала!!!В сообщении #153 я прикрепил 2 картинки,на первой нормальные пробелы между словами,на 2(ой) двойные пробелы!!!Как сделать,чтобы было,как на первой!!! ссылка Спасибо black
Сообщение отредактировал dj-vblack - Вторник, 13 Дек 2011, 13:56:33
|
|
dj-vblack, Странно , ни каких двойных пробелов в FireFox нет
Красным выделено , лишнее ... Синим вообще ни к чему в заголовке лепить такое ... .eTitle {width: 500px; height: auto; line-height: 15px; color: #2c2c2c; background: url(/.s/t/793/8.png) repeat-y; text-shadow: #eeeeee 1px 1px 1px; text-transform: uppercase; font-weight: bold; border-radius: 5px 5px 5px 5px; -moz-border-radius: 5px 5px 5px 5px; padding: 8px 0px 8px 0px;} Прикрепления:
0977027.jpg
(31.4 Kb)
|
|
dj-vblack,
 Ну напишите как выделено цветом ... .eTitle {width: 500px; height: auto; text-align: left; color: #2c2c2c; background: url(/.s/t/793/8.png) repeat-y; text-transform: uppercase; font-weight: bold; border-radius: 5px 5px 5px 5px; padding: 8px 0px 8px 0px;} |
|
Miss_Esq, Спасибо,код text-align: left изменил ситуацию!!!Последний вопрос,как сделать,чтобы от левого края был отступ текста 15px???И где находится часть кода отвечающая за название материала в самой статье???
Пробывал вводить код padding-left:15px не помогает...может ни туда ввожу!? black
Сообщение отредактировал dj-vblack - Вторник, 13 Дек 2011, 19:24:10
|
|
dj-vblack,
Quote может ни туда ввожу!? <table style="width: 100%; border-collapse: collapse; border: 0px;"> <tr> <td>Для кода даты</td> <td style="padding-left: 15px;">Для кода заголовка</td> </tr> </table> |
| |||
Будьте в курсе всех обновлений: подпишитесь на наш официальный Telegram-канал uCoz и задавайте вопросы в чате сообщества!