Чат сообщества
   | |
| Модератор форума: 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 |
|
Miss_Esq, он выглядит не просто по разному, там именно какое-то непониманик со стороны оперы.
В свойствах основного блока есть строчка margin:105px auto 10px; Во всех браузах, кроме оперы выглядит так как и должно  А вот опера  Если написать так margin:auto; В целом становится нормально, но красота теряется да и художнику который обоину фоновую делал будет обидна потеря пагоды во всех обозвевателях. ДА и по задумке там должен быть отступ. Quote (Miss_Esq) Во всяком случае одинакового отображения для Opera , FireFox , Google Chrome и IE 8 - 9 нужно добиваться вёрсткой HTML , а не отдельными метатегами , условными операторами или ещё чем ... Применение костылей для конкретных версий конкретных обозревателей это тупик ... Это-то я понимаю, но хотя бы как временное средство они подходят, чтобы люди могли пользоваться, а я тем временем искала истинные пути решение Прикрепления:
6012701.png
(410.3 Kb)
·
6914748.png
(141.5 Kb)
Сообщение отредактировал Real-san - Пятница, 30 Дек 2011, 16:50:03
|
|
Real-san,
Quote margin:105px auto 10px; margin: 105px auto; - это например , свеху и снизу по 105 по бокам авто margin: 105px auto 10px auto; - сверху 105 по бокам авто , снизу 10 margin: 105px; - со всех сторон по 105 А ваш как прочитать ??? margin: 105px auto 0px auto; Сообщение отредактировал Miss_Esq - Пятница, 30 Дек 2011, 18:10:38
|
|
Miss_Esq, ну как говорится "Я не волшебник, я только учусь"
 ПЛюс настраивала в Дримвевере, он ошибок не показал, по справочнику поняла что так писать тоже возможно. Да вот еще что странное заметила, если в Дримвевере, даже при старом написании проблемной строчки, нажать кномку Просмотр и отладка в браузере и выбрать Оперу, то все отображается как надо. Но в живом уже так сказать виде (т.е в нете), почему то нет. Сообщение отредактировал Real-san - Пятница, 30 Дек 2011, 21:20:10
|
|
Real-san, Попробуйте Doctype в общих настройках прописать ... В случае с IE это могло бы помочь а вот с Opera ...
|
|
Miss_Esq, он там прописан, уже месяц или два точно. А в купе с вот этим
Quote (Real-san) Да вот еще что странное заметила, если в Дримвевере, даже при старом написании проблемной строчки, нажать кномку Просмотр и отладка в браузере и выбрать Оперу, то все отображается как надо. Но в живом уже так сказать виде (т.е в нете), почему то нет. оно меня вообще конкретно сбивает с толку... Сообщение отредактировал Real-san - Пятница, 30 Дек 2011, 23:33:46
|
|
Здравствуйте! Помогите пожалуйста решить мою проблему. Дело в том, что в браузере Опера. Сайт http://залазна.рф
1. Не создаются папки и не удаляются файлы в файловом менеджере. 2. Не отправляются сообщения в гостевой книге (при нажатии на кнопку отправить пишет "Идет передача данных..." бесконечно и ни чего не происходит). Пробовал частить кэш - не помогло. Сообщение отредактировал meys - Пятница, 30 Дек 2011, 23:52:03
|
|
meys,
Quote и ни чего не происходит  |
|
Miss_Esq, Да Вы правы. в IE9 тоже такая же ситуация.
В Chrome и FF данной проблемы нет. Можно это как то исправить? |
|
Помогите, сделал классное меню в дримвайфере,
по возможности оптимизировал под ie скриптом но всё равно края слоёв в ie цветными линиями обведены #1 как решить эту проблему в самом дримвайфере, тоесть что бы можно было подредактировать опираясь на различные браузеры #2 кому не трудно подредактируйте под современные браузеры, а то нормального материала по данному вопросу не могу найти Code <style type="text/css"> #apDiv1 { position:absolute; width:61px; height:85px; z-index:1; margin-left:12; margin-top:-44; } #apDiv2 { position:absolute; width:65px; height:94px; z-index:2; margin-left:73; margin-top:-44; } #apDiv3 { position:absolute; width:65px; height:94px; z-index:2; margin-left:174; margin-top:-44; } #apDiv4 { position:absolute; width:65px; height:94px; z-index:2; margin-left:241; margin-top:-44; } #apDiv5 { position:absolute; width:65px; height:94px; z-index:2; margin-left:356; margin-top:-44; } #apDiv6 { position:absolute; width:65px; height:94px; z-index:2; margin-left:417; margin-top:-44; } #apDiv7 { position:absolute; width:65px; height:94px; z-index:2; margin-left:475; margin-top:-44; } </style> <script type="text/javascript"> function MM_preloadImages() { //v3.0 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}} } function MM_swapImgRestore() { //v3.0 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc; } function MM_findObj(n, d) { //v4.01 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); if(!x && d.getElementById) x=d.getElementById(n); return x; } function MM_swapImage() { //v3.0 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3) if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];} } </script> <body onload="MM_preloadImages('http://1415926535.moy.su/images/prozr.gif')"><table width="550" height="120" border="0" background="http://1415926535.moy.su/images/fon_menu.jpg"> <tr> <td><div id="apDiv1"><a href="$HOME_PAGE_LINK$" title="Главная Brute Force"><img src="http://1415926535.moy.su/images/glavnaya.jpg" alt="Главная" width="59" height="89" id="Image1" onmouseover="MM_swapImage('Image1','','http://1415926535.moy.su/images/prozr.gif',1)" onmouseout="MM_swapImgRestore()" /></a></div> <div id="apDiv2"><a href="$HOME_PAGE_LINK$" title="Закладки"><img src="http://1415926535.moy.su/images/favorit.jpg" alt="Главная" width="59" height="89" id="Image2" onmouseover="MM_swapImage('Image2','','http://1415926535.moy.su/images/prozr.gif',1)" onmouseout="MM_swapImgRestore()"/></a></div> <div id="apDiv3"><a href="$PM_URL$" title="<?if($UNREAD_PM$)?>Новые сообщения:$UNREAD_PM$<?else?>Входящии сообщения<?endif?>"><img src="http://hw.ucoz.net/images/messg.jpg" alt="Сообщения пользователя сайта Brute Force" width="69" height="89" id="Image3" onmouseover="MM_swapImage('Image3','','http://1415926535.moy.su/images/prozr.gif',1)" onmouseout="MM_swapImgRestore()"/></a></div> <div id="apDiv4"><a href="$PERSONAL_PAGE_LINK$" title="Профиль $USERNAME$"><img src="http://1415926535.moy.su/images/profil.jpg" alt="Профиль пользователя на Brute Force" width="59" height="89" id="Image4" onmouseover="MM_swapImage('Image4','','http://1415926535.moy.su/images/prozr.gif',1)" onmouseout="MM_swapImgRestore()"/></a></div> <div id="apDiv5"><a href="$LOGOUT_LINK$" title="Покинуть профиль $USERNAME$"><img src="http://1415926535.moy.su/images/exit.jpg" alt="Выйти с Брутфорсологии" width="59" height="89" id="Image5" onmouseover="MM_swapImage('Image5','','http://1415926535.moy.su/images/prozr.gif',1)" onmouseout="MM_swapImgRestore()"/></a></div> <div id="apDiv6"><a href="$LOGIN_LINK$" title="Ввести логин и пароль"><img src="http://1415926535.moy.su/images/vxod.jpg" alt="Вход на Brute Force" width="59" height="89" id="Image6" onmouseover="MM_swapImage('Image6','','http://1415926535.moy.su/images/prozr.gif',1)" onmouseout="MM_swapImgRestore()"/></a></div> <div id="apDiv7"><a href="$REGISTER_LINK$" title="Обязательная регистрация"><img src="http://1415926535.moy.su/images/reg.jpg" alt="Brute Force регистрация" width="59" height="89" id="Image7" onmouseover="MM_swapImage('Image7','','http://1415926535.moy.su/images/prozr.gif',1)" onmouseout="MM_swapImgRestore()"/></a></div></td> </tr> </table> |
|
HavingingWorld, Если это у вас замещение изображений
Quote <div id="apDiv1"><a href="$HOME_PAGE_LINK$" title="Главная Brute Force"><img src="http://1415926535.moy.su/images/glavnaya.jpg" alt="Главная" width="59" height="89" id="Image1" onmouseover="MM_swapImage('Image1','','http://1415926535.moy.su/images/prozr.gif',1)" onmouseout="MM_swapImgRestore()" ></a></div> То делается это так без применения скритов ( тот что у вас в заголовке страницы ... ) Quote <div id="apDiv1"><a href="$HOME_PAGE_LINK$" title="Главная Brute Force"> <img id="pic01" src="http://1415926535.moy.su/images/glavnaya.jpg" alt="Главная" style="display: block; width: 59px; height: 89px;" onmouseover="document.getElementById('pic01').style.display='none';document.getElementById('pic02').style.display='block';"> <img id="pic02" src="http://1415926535.moy.su/images/prozr.gif" alt="Главная" style="display: none; width: 59px; height: 89px;" onmouseout="document.getElementById('pic02').style.display='none';document.getElementById('pic01').style.display='block';"></a></div> БЕЗ этого Сообщение отредактировал Miss_Esq - Вторник, 03 Янв 2012, 23:58:08
|
|
Здравствуйте! А есть ли возможность сделать под браузер IE, отдельное меню для сайта, например:
<?if($IE$)?> Меню в IE <?else?> Меню в остальных браузерах <?endif?> Есть ли код If, отдельно для браузера IE? Нашел решение, пару страниц назад написали: <?if($USER_AGENT$='ie')?> В IE <?else?> В любом другом <?endif?> Сообщение отредактировал DarkAp - Среда, 04 Янв 2012, 03:01:00
|
|
DarkAp,
Quote А есть ли возможность сделать под браузер IE, отдельное меню для сайта,  Лучше не стоит этого делать , если заточите как вы предполагаете под IE , на самом деле в тех же IE разных версий будет так же различаться как у вас например различается то из за кторорого вы решили сделпть для IE отдельное меню .. Потом всё равно снесёте ... Делайте одно но нормальное меню для всех обозревателей , это вполне реально выполнимая задача ... |
|
fflesh, скажи плизз а где это писать не понел
 Начинающий помощник Ucoz.
Одна единственная жизнь и та лишённая достатка проходит нас, толкая, в низ и исчезая без остатка! http://kinosayt2012.ucoz.ru/ http://baga1996.ucoz.ru |
|
Miss_Esq,
Quote Идет передача данных..." бесконечно и ни чего не происходит). Вы не ответили это можно как-нибудь исправить? Или это не у меня одного проблема такая? |
|
|
| |||
Будьте в курсе всех обновлений: подпишитесь на наш официальный Telegram-канал uCoz и задавайте вопросы в чате сообщества!