Модератор форума: Yuri_G  
Сообщество uCoz » Мастерская uCoz » Дизайн: управление шаблонами » Оптимизация дизайна под разные браузеры
Оптимизация дизайна под разные браузеры
Модератор форума
Сообщение # 1 | 22:12:11 17 Апр 2007
Зачем нужен "правильный" 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
uzbaby
Сообщений: 22
Репутация: 1

Сообщение # 436 | 08:20:54 25 Фев 2012
я еле-еле сделала вот такой информер карусель

все хорошо только в ИЕ он отражается неправильно (в хроме и мозиле хорошо)


то есть левая кнопочка-движок почему то залез на картинку. Что надо исправить

вот скрипт
Code
<script type="text/javascript" src="/slayder/csteror.js"></script><table border="0" cellpadding="0" cellspacing="0" width="100%" class="eBlock" align="center"><tbody><tr><td style="padding:3px;"><div class="eTitle" style="text-align:center;"><span style="font-family: Georgia; font-size: 12pt;"><span style="color: rgb(107, 142, 35); font-weight: normal;"></span></span></div>   
   <div class="eMessage" style="text-align:center;clear:both;padding-top:2px;padding-bottom:2px;"><div class="infiniteCarousel">   
   <div class="wrapper">   
   <ul>   
<script type="text/javascript" src="http://www.uzbaby.uz/informer/37-1"></script>  
   </ul> </div> <br>   
   </div></div></td></tr></tbody></table><br>


вот КСС
Code
.infiniteCarousel   
   {   
   position:relative   
   }   

   .infiniteCarousel .wrapper   
   {   
   width:315px;   
   overflow:auto;   
   min-height:10em;   
   margin:0 40px;   
   top:0   
   }   

   .infiniteCarousel .wrapper ul   
   {   
   width:9999px;   
   list-style-image:none;   
   list-style-position:outside;   
   list-style-type:none;   
   margin:0;   
   padding:0;   
   top:0   
   }   

   .infiniteCarousel ul li   
   {   
   display:block;   
   float:left;   
   padding:10px;   
   height:81px;   
   width:113px   
   }   

   .infiniteCarousel ul li a img   
   {   
   display:block   
   }   

   .infiniteCarousel .arrow   
   {   
   display:block;   
   height:36px;   
   width:37px;   
   background:url(/slayder/arrow.png) no-repeat 0 0;   
   text-indent:-999px;   
   cursor:pointer;   
   top:36px;   
   position:absolute   
   }   

   .infiniteCarousel .forward   
   {   
   background-position:0 0;   
   right:3px   
   }   

   .infiniteCarousel .back   
   {   
   background-position:0 -72px;   
   left:5px   
   }   

   .infiniteCarousel .forward:hover   
   {   
   background-position:0 -36px   
   }   

   .infiniteCarousel .back:hover   
   {   
   background-position:0 -108px   
   }


пожаааалуйста помогите
juicypussy
Сообщений: 8
Репутация: 6

Сообщение # 437 | 09:20:25 25 Фев 2012
Quote (uzbaby)
пожаааалуйста помогите


дай плз свой сайт, попробую посмотреть на практике (на первый взгляд эта "конструкция" мне показалась как минимум запущенной)

P.S. Только на будущее, выбирай повнимательнее тему, потому что эта не для просьб о помощи - на это есть специально созданные...
как только модеры проверят мою статью, читайте о CSS спрайтах на http://manual.ucoz.net/board/25-1-0-414 (если понравится, поддержите своим голосом)
APOSTOLRUS4355
Сообщений: 3
Репутация: 5

Сообщение # 438 | 13:53:43 27 Фев 2012
Добрый день! прошу помочь с настройкой меню сайта для разных браузеров

сайт нажми на ссылку

Сообщение отредактировал APOSTOLRUS4355 - Понедельник, 27 Фев 2012, 14:06:17
Miss_Esq
Сообщений: 13859
Репутация: 4159
Уровень замечаний:

Сообщение # 439 | 14:34:38 27 Фев 2012
APOSTOLRUS4355,
1 . Doctype <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> порписать в Общих настройках сайта а не в шаблоне на странице
3 . Убрать мусор
geometriya ISO 3166-2 DEE
Сообщение отредактировал Miss_Esq - Понедельник, 27 Фев 2012, 14:36:50
VoVa_Pukin
Сообщений: 3
Репутация: 5

Сообщение # 440 | 14:49:33 27 Фев 2012
спасибо вставил в общих настройках (но интервал в меню в IE не исчез)

Quote (Miss_Esq)
<li> <a href="<div id="uMenuDiv1" class="uMenuV" style="position:relative;"><ul class="uMenuRoot">

этого в моем коде страницы нет

это мой код страницы
Code

<td width="270" valign="top">
   <table style="width: 83%" align="right">
   <tr>   
   <td><div id="button">
   <ul>
   <li><a href="$SMENU_1$"></a></li>
   </ul>
   </div></td>


а то что написали Вы вставляется непонятно как и откуда берется не понимаю(((
Сообщение отредактировал VoVa_Pukin - Понедельник, 27 Фев 2012, 14:52:21
Miss_Esq
Сообщений: 13859
Репутация: 4159
Уровень замечаний:

Сообщение # 441 | 14:55:02 27 Фев 2012
VoVa_Pukin, Убрать
<td width="270" valign="top">
<table style="width: 83%" align="right">
<tr>
<td><div id="button">
<ul>
<li> <a href=" $SMENU_1$"> </a> </li>
</ul>
</div></td>
geometriya ISO 3166-2 DEE
VoVa_Pukin
Сообщений: 3
Репутация: 5

Сообщение # 442 | 15:09:52 27 Фев 2012
Miss_Esq, спасибо,

осталось побороть интервал в меню в IE (интернет эксплоуре) и лишнею строку в меню
Сообщение отредактировал VoVa_Pukin - Понедельник, 27 Фев 2012, 16:51:33
Miss_Esq
Сообщений: 13859
Репутация: 4159
Уровень замечаний:

Сообщение # 443 | 15:15:42 27 Фев 2012
VoVa_Pukin, Вам лучше бабочки прописать фоном в пункты меню а не так

list-style-image: url(http://mama34.my1.ru/punkt1.png);
geometriya ISO 3166-2 DEE
as999
Сообщений: 41
Репутация: 0

Сообщение # 444 | 18:28:44 27 Фев 2012
Посоветуйте, пжл. У меня Опера - сайт отображается нормально. Зашел челове с Mozilla Firefox и сказал, что центр.текст съезжает влево. Сайт - http://cerebro999.ru Как можно это исправить? Спасибо
Сообщение отредактировал as999 - Понедельник, 27 Фев 2012, 18:34:49
Miss_Esq
Сообщений: 13859
Репутация: 4159
Уровень замечаний:

Сообщение # 445 | 18:40:44 27 Фев 2012
as999, У вас явные ошибки , сайт заточен конкретно под Opera . Сайт отображается криво во всех обозревателях кроме Opera .. Переделывать шаблон страницы , CSS ...
geometriya ISO 3166-2 DEE
as999
Сообщений: 41
Репутация: 0

Сообщение # 446 | 18:58:12 27 Фев 2012
Quote (Miss_Esq)
as999, У вас явные ошибки , сайт заточен конкретно под Opera . Сайт отображается криво во всех обозревателях кроме Opera .. Переделывать шаблон страницы , CSS ...

А как мне это сделать под разные браузеры, где узнать, что нужно добавить в код для других браузеров?
Сообщение отредактировал as999 - Понедельник, 27 Фев 2012, 19:13:08
Miss_Esq
Сообщений: 13859
Репутация: 4159
Уровень замечаний:

Сообщение # 447 | 19:38:48 27 Фев 2012
as999,
Quote
что нужно добавить в код для других браузеров
Не добавлять а переделать то что есть так что бы нормально отображался во всех обозреателях ..

И прописать Doctype в Общих настройках сайта ...
geometriya ISO 3166-2 DEE
victor8704
Сообщений: 9
Репутация: 1

Сообщение # 448 | 00:46:55 05 Мар 2012
Искал ответ, но видимо это только у меня!? Подскажите как исправить?
Во всех браузерах включяя ТЛФ сайт работает нормально. А вот в Chrom такая проблема: в меню появилась "прокрутка", которая не позволяет перейти на страницы второго уровня
Скрин проблемы:

Адрес сайта: http://tvoydom.ucoz.com/
Прикрепления: 5785256.gif (33.6 Kb)
Прежде чем мечтать, подумай - а вдруг сбудется !?
Miss_Esq
Сообщений: 13859
Репутация: 4159
Уровень замечаний:

Сообщение # 449 | 02:54:27 05 Мар 2012
victor8704, Убрать в CSS overflow:auto;
geometriya ISO 3166-2 DEE
victor8704
Сообщений: 9
Репутация: 1

Сообщение # 450 | 14:33:47 05 Мар 2012
Miss_Esq, Спасибо!
Прежде чем мечтать, подумай - а вдруг сбудется !?
Сообщество uCoz » Мастерская uCoz » Дизайн: управление шаблонами » Оптимизация дизайна под разные браузеры
Поиск: