Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > Вёрстка веб-сайтов > Продвинутый вопрос


Автор: AN_Reise 12.7.2007, 20:37
Профессионалы, можете объяснить природу появления съезжаний элементов на разных моделях браузеров, как с этим бороться?

Автор: WebDisaster 12.7.2007, 21:24
Пока профессионалы спят... маненько пошалю ;)

Если говорить о природе явления, то состоит она в том, что разные браузеры 

1. имеют разные движки, которые 
2. написаны разработчиками, по-разному интерпретирующими стандарты (особенно преуспели в этом ребята из M$.)
3. имеют разную кривизну в собственном коде (одни загнуты вправо, другие - влево smile


Как с этим бороться - вопрос отдельный. И довольно сложный.

1. На старые кривые браузеры вообще забить. Что относить к понятию "старый" - решать придётся индивидуально. Для Оперы и ФайрФокса, ИМХО, стоит ориентировать на самые последние версии и билды. Используют их, как правило, люди достаточно "технически продвинутые" и следящие за обновлениями программ (которые, к тому же, совершенно бесплатны)

2. Писать код с максимально возможным соблюдением стандартов w3c, избегая невалидных хаков. Это, по крайней мере, минимизирует проблемы при появлении новых браузеров (к M$/IE, пожалуй, это относится с большой натяжкой)

3. В реальной жизни придётся использовать хаки для разделения браузеров (для IE - ещё и условные комментарии) и отдавать каждому браузеру код, учитывающий его персональную кривизну.

Моя ИМХА так думает.

Автор: AN_Reise 14.7.2007, 05:57
Да, ответ неутешительный... это же какой геморрой  smile 
Особенно надоедают съезжания элементов, каждый браузер делает свои отступы, границы...

Вот - для конкретики http://rusforumz.com/ipb.html?act=Attach&type=post&id=1233
Может на этом примере мне объяснить подробнее? И по возможности помочь с кодом, мне здесь как раз и нужно, чтобы на всех браузерах эта страничка смотрелась идентично.

Хм... css хаки, об этом я не слышал... можете ссылки кинете, если таковые имеются?

Автор: WebDisaster 14.7.2007, 17:26
1. Чтобы обнулить все "заводские настройки" браузеров есть http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/

2. Какие конкретно хаки интересуют? Хорошие подборки самых разнообразных хаков, предназначенных для разделения бразуеров, есть http://centricle.com/ref/css/filters/, http://dithered.chadlindstrom.ca/css_filters/index.htmlи т.д. А вообще, можно погуглить с запросом css hacks browser и чтиво на ближайшую пару месяцев обеспечено.

3. По раскладке, которую Вы хотите сделать, очень мало информации. Нужно видеть макет и подробнейшее ТЗ:  что "резинится", что "не резинится", что и где выводится и т.д. и т.п. Лично меня ничто не выводит из равновесия так, как необходимость десять раз ездить по одному месту, переделывая вёрстку под каждый новый "бзик". Один из главных принципов сбережения собственных нервов при работе - верстать только после того, как железно согласован макет. Любые последующие изменения - за отдельные деньги. Желательно большие, чтобы желание "бзикать" исчезло сразу  ;)

Да, а в качестве основы для своей страницы посмотрите следующий пример (фоновый цвет только для того, чтобы были видны div'ы):

Код

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Untitled Document</title>
</head>

<style type="text/css">
<!-- 
div {
    width: 33%;
    float: left;
}
#first {
    background-color: #cff;
}
#second {
    background-color:#99F;
}
#third {
background-color:#90F;
}
-->
</style>

<body>
<div id="first">Первая колонка</div><div id="second">Вторая колонка</div><div id="third">третья колонка</div>
</body>
</html>

Автор: AN_Reise 16.7.2007, 21:09
Хех, не дам вам расслабиться... У меня проблема, от который я могу прямо-таки умереть
Вообщем я типа немного дизайнер наголову ну и это страничку сделал
в ней есть такая картинка веселая "информация" и над ней осколок компаса торчик
и вот, на всех браузерах они смотрятся слитно вместе, а на осле раздвигаются.. чегоше я не делал и размеры установил, придавление, таблицы аккуратно сделал (или нет), вообщем вот - смотрите, а то я и правду умру...

http://an-reise2.narod.ru

Автор: AN_Reise 17.7.2007, 06:55
Все работает, обновил версии браузеров, работает  smile 

Автор: liliana2 22.11.2007, 08:38
Хочу задать конкретный вопрос, 
В общем есть блок:

http://liliana2.freetzi.com/index12.htm

который вместе с дочерними элементами позиционируется по центру браузера
Код

#contents{
    position: relative;
    width: 800px;
    height: 500px;
    display: table;
    margin: 0 auto;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 9px;}

#contentsie{
    position: relative;
    width: 800px;
    height: 500px;
    display: table;
    margin: 0 auto 0 100px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 9px;}

но в ие и в файерфоксе, макетик уезжает влево, просьба
подскажите (а лучше покажите) какими конкретными средствами можно это сделать
если кому не трудно можно пример кода или как это называют условного комментария.
Нашла условие при котором все красиво, но не уверена что правильном месте егопоставила:
Код
<div id="contents">
<!--[if IE]>id="contentsie"<![endif]-->
  <div id="poet">
  <p align="center" style="font-size:14px; font-weight:bold; color:#000000; margin-top:7px;">
    
    </p>
  </p> Контент
</div>

или вот так, но тоже не работает:
Код
<div id="contents">
<!--[if IE]><style type="text/css">.contentsie {margin: 0 auto 0 100px;}</style><![endif]-->
  <div id="poet">
  <p align="center" style="font-size:14px; font-weight:bold; color:#000000; margin-top:7px;">
    
    </p>
  </p> Контент
</div>


Автор: WebDisaster 22.11.2007, 10:58
Я не понял, зачем Вам там

#contentsie{display: table;}

ИМХО, если убрать, всё работает нормально.

Автор: liliana2 22.11.2007, 11:08
Если убрать, не сохраняется центровка при изменении разрешения экрана (в частности масштаб в опере) 

Ой smile  и правда работает... smile 
а раньше не работало... теперь только ie выбивается... но там надо комментом маргин побольше просто вставить, да? smile 

Автор: WebDisaster 22.11.2007, 11:37
Какая версия IE? Смотрел в 6-ой проблемы не видел. Семёрки сейчас под рукой нет.

Автор: liliana2 22.11.2007, 11:39
Код

<div id="contents">
<!--[if IE]>   
.contents {margin: 0 auto 0 100px;}
<![endif]--> 

<div>вложенный блок1</div>  
<div>вложенный блок2</div>  
<div>вложенный блок3</div>  
  </div>

так должно быть? чтобы в ие, основной блок был тоже по центру?

Автор: WebDisaster 22.11.2007, 12:17
Повторю ещё раз: в IE6 я проблемы не вижу. Всё и так "по центру". Если вопрос касается синтаксиса условных комментариев, тогда -- нет, неправильно.

1. Стили должны (по стандарту) подгружаться между <head> и </head> (если это не инлайн-стили).
Если Вы хотите определить стиль для всех версий IE, тогда правильно так:

Код

<head>
...
<!--[if IE]>
     <link href="pato/to/file/style.css" rel="stylesheet" type="text/css"/>
<![endif]-->

</head>


А уже внури файла style.css пишете .contents {margin: 0 auto 0 100px;}

Причём, если это идет "переопределение" ранее назначенного стиля, которое должно действовать только для IE (всех версий) и игнорироваться другими браузерами, тогда этот файл должен загружаться последним

Следующий вариант (тоже последний из загружаемых стилей, если идёт переопределение для всех версий IE): 

Код

<head>
...
  <!--[if IE]>
     <style type="text/css">
          .contents {margin: 0 auto 0 100px;}
     </style>
  <![endif]-->
</head>

Автор: liliana2 22.11.2007, 12:24
В том то и дело что в 6 ие все приклеено к левому краю
Хотя спасибо что подсказали где это прописывать
в ие 7 все работает нормально
я сделала так:
Код

<head>

 <!--[if lt IE 7]>
     <style type="text/css">
          .contents {    margin: 0 auto 0 100px;
    float:center;
}
     </style>
  <![endif]-->

  </head>


Автор: WebDisaster 22.11.2007, 12:35
Мама...  А что такое 

Цитата(liliana2 @  22.11.2007,  12:24 Найти цитируемый пост)
float:center;


*** пошёл покурить ***

Автор: liliana2 22.11.2007, 12:39
ой... блин.. попутала немного, мозги кипят, ну у меня почему то даже при таком правильно поставленном синтаксисе и расположении ничего не выходит все равно приклеивается к левому краю, если ставлю флоат райт, приклеивается вправо (*паника* *что же мне делать?!!!*)
Есть еще варианты, примеры, как сделать в ие меньше 7-го нормальную центровку?

Автор: WebDisaster 22.11.2007, 12:51
Тот код, который приложен ниже, только что посмотрел в IE6 FF2 Opera9 - на мой взгляд, это то, что Вам было нужно. Хотя "ловлей блох" я там не занимался и отсутствие косяков не гарантировано. Всё остальное -- может быть вечером. Но не факт.

Код

<?xml encoding="windows-1251"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>Шаблон-визитка</title>
<meta http-equiv="Content-Language" content="ru" />
<meta http-equiv="Тип-содержимое" content="text/html; charset=windows-1251">
<style type="text/css">
a {    display: block;
    padding: 2px 0px 2px 0px;
    text-decoration: none;}
a:hover{
    text-decoration: none;}
#poet {    position:absolute;
    top:260px;
    right:0;
    left: 179px;
    width: 421px;
    height: 319px;
    border: 1px solid #000000;}
#writer {position:absolute;
    top:261px;
    right:0;
    left: 1px;
    width: 173px;
    height: 319px;
    border: 1px solid #000000;
    border-bottom: 1px solid #cccccc;
    font-size: 9px;
    color:#000000;
    white-space: normal;
}
#writed {position:absolute;
    top:114px;
    right:0;
    left: 0px;
    width: 600px;
    height: 140px;
    border: 1px solid #000000;
    border-bottom: 1px solid #cccccc;
    font-size: 9px;
    color:#000000;
    white-space: normal;
}
#reader{position:absolute;
    top:114px;
    right:0;
    left: 605px;
    width: 194px;
    height: 193px;
    border: 1px solid #000000;
    border-bottom: 1px solid #cccccc;
    font-size: 9px;
    color:#000000;
    white-space: normal;
}
#seader{position:absolute;
    top:312px;
    right:0;
    left: 605px;
    width: 194px;
    height: 166px;
    border: 1px solid #000000;
    border-bottom: 1px solid #cccccc;
    font-size: 10px;
    color:#000000;
    white-space: normal;
}
#teader{position:absolute;
    top:484px;
    right:0;
    left: 605px;
    width: 194px;
    height: 96px;
    border: 1px solid #000000;
    border-bottom: 1px solid #cccccc;
    font-size: 10px;
    color:#000000;
    white-space: normal;
}
#author {position:absolute;
    top:73px;
    right:0;
    left: -1px;
    width: 800px;
    height: 34px;
    border: 1px solid #000000;
    border-bottom: 1px solid #cccccc;
    font-size: 9px;
    color:#000000;
    white-space: normal;
}
#header {
    position:absolute;
    top:32px;
    right:0;
    left: -1px;
    width: 800px;
    height: 34px;
    border: 1px solid #000000;
    border-bottom: 1px solid #cccccc;
    font-size: 9px;
    color:#000000;
    white-space: normal;
}
#contents{
    position: relative;
    width: 800px;
    height: 500px;
    display: table;
    margin: 0 auto;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 9px;}
#contentsie{
    position: relative; 
    width: 800px;
    height: 500px;
/*    display: table;   */
    margin: 0 auto 0 100px; 
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 9px;  
    border: 1px solid #fff; 
}
    
.informer_clok_text_1195639016
{    color: #000000;
    background-color: #FFFFFF;
    font-size: 5px;}
</style>

<body>
<!-- div style="width: 800px!important; margin: 0 auto; border: 2px solid #f00; position: relative;" -->
<div id="contentsie" style="background-color: #CCC">
  <div id="poet">
  <p align="center" style="font-size:14px; font-weight:bold; color:#000000; margin-top:7px;">    </p>
  </p> Контент</div>
    
    <div id="header">
<table width="799" height="35" border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td width="663" height="35"><div align="center"></div></td>
  <td width="136" align="center" valign="middle"><div align="center">
  
  
  <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="120" height="15" id="numerical_watch_120x15_no_border" align="middle">
<param name="movie" value="/swf/numerical_watch_120x15_no_border.swf" />
<param name="loop" value="false" />
<param name="menu" value="false" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<embed src="/swf/numerical_watch_120x15_no_border.swf" loop="false" menu="false" quality="high" bgcolor="#ffffff" width="120" height="15" name="numerical_watch_120x15_no_border" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
  </div></td></tr></table></div>
  
  <div id="author">
<table width="799" height="35" border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td width="583" height="35"><div align="center"></div></td>
  <td width="341" align="center" valign="middle"><div align="center">Контакты, телефоны </div></td></tr></table></div>
  
  <div id="writer"></div>  
    <div id="writed" class="стиль1"></div>
  <div id="reader"></div>
  <div id="seader"></div>
  <div id="teader"></div>
</div>
<!-- /div -->
</body>
</html>

Автор: liliana2 22.11.2007, 12:55
ща, посмотрю, в любом случае, огромаднейшее спасибо
-------------------------------
спасибо прям не знаю в какой степени - работает! гениально!
-------- 
 smile я правда пока не поняла как и почему но работает....
--------------
жилы бы в одном городе с меня бы непременно пиво!
-------------
хотя все равно в опере при смене масштаюба уезжает вверх влево

Автор: liliana2 3.12.2007, 10:09
Возникла новая проблема, 
http://sibznak.uoh.ru/test13/index.shtml
Делаю центровку родительского элемента страницы
маргин: авто (справа и слева) во всех браузерах кроме ie (что неудивительно) центровка отображается нормально, а вот в ие, снова приклеивается к левому краю, подскажите что еще можно сделать

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)