Не правильное отображение в Chrome

[param]

Здравствуйте. Первый раз столкнулся с ситуации, что в Хроме некорректно отображается страница, то есть в Мозилле, Опере и даже ИЕ всё ОК. а в Хроме нет... Ситуация следующая:

<div id="wrapper">

	<header id="header">

	</div>
        <nav id="hor_menu">

        </nav>
         </header> 
	<header id="slider">   

	</header>

	<section id="middle">
    	<div id="container">
        	<div id="content">

	        </div>
	</div><!--#container-->

		<aside id="sideRight">

		</aside> 

		<aside id="sideLeft">

		</aside>

	</section>

</div><!-- #wrapper -->

html, body{
      height:100%;
      background:#fff;
}
body{
      font:12px/18px Arial, Tahoma, Verdana, sans-serif;
      width:100%;
}
#wrapper{    
        width:1002px; /*width:1002px;*/
        margin:0 auto;
 	height:100%;
}
#header{
	height:155px;
	position:relative;
	border:1px solid #b4b0b0;
	border-bottom:none;	
}
#slider{
        height:285px;
	background:#fff;
	position:relative;
	z-index:10;
        margin-bottom:-440px;
	border-left:1px solid #b4b0b0;
	border-right:1px solid #b4b0b0;
}
#sli{
	position:absolute;
	left:55px;
	top:10px;
	width:935px;
	height:235px;
}
#middle{    
        min-height:100%;
	background:url(../images/all.jpg) repeat-y;
	border-left:1px solid #b4b0b0;
	border-right:1px solid #b4b0b0;
}
#middle:after{    
    content:'.';
    display:block;
    clear:both;
    visibility:hidden;
    height:0;
}
#container{
    width:100%;
    float:left;
    overflow:hidden;
    margin-top:280px;
}
#content{
    padding:0 270px 0 220px;
}
#sideLeft{
    float:left;
    width:199px; 
    margin-left:-100%;
    position:relative;
    margin-top:280px;
}
#sideRight{
    float:left;
    margin:0 -3px 0 -264px; 
    width:264px; 
    position:relative;
    margin-top:280px;
}

Проблема заключается в том, что Хром неправильно рассчитывает margin-top. Ему нужно задавать не 280 пикселей, а большее значение, иначе контент левой, правой и центральной колонки заезжает под верхний блок. Как это можно обойти?

[tius]

<div id="wrapper">

        <header id="header">

        </div>
        <nav id="hor_menu">

Тут </div> лишний.

А вообще у меня во всех браузерах все одинаково.

[param]

У меня тоже везде одинаково, правда кроме Хрома)

[tius]

Тогда картинки как должно быть в студию и как есть в хроме.

Потому что серая рамка из примера везде одинаковая.

[param]

Подумал, что влияет меню, но нет...

Edited February 3, 2012 by param

[param]

Нашёл хак для Хрома

@media screen and (-webkit-min-device-pixel-ratio:0) {
  #sideRight{
    margin-top:445px;
  }
}

Однако всё равно ничего не происходит. Хотя вроде как стиль должен же сработать....

[Switch74]

думаю лучше пересмотреть верстку, чем придумывать хаки

[param]

Посмотрел, через средства разработчик в Хром, увидел что контент стоит за header, при этом я ставлю всевозможные значения margin-top для правой колонки, но это вообще не как не влияет...

upd: Хотя в этом инструменте для разработчиков вообще пишется полный бред, для левой колонки у меня марджин сверху 280 пиксилей, а там пишется, что 445...

[param]

Хорошо, можно и пересмотреть, но нужно понимать, что пересматривать, почему хром не правильно отображает...

[Switch74]

картинки как должно быть мы так и не дождались, чтобы говорить о том что нужно для этого сделать

#content{
    padding:0 270px 0 220px;
}
#sideLeft{
    float:left;
    width:199px; 
    margin-left:-100%;
    position:relative;
    margin-top:280px;
}
#sideRight{
    float:left;
    margin:0 -3px 0 -264px; 
    width:264px; 
    position:relative;
    margin-top:280px;
}

почему sideRight имеет float:left; и отрицательные margin, зачем левой и правой колонкам нужен отступ сверху?

могу предположить, что вам нужно было что-то вроде этого:

<style>
*{margin:0px;padding:0px;}
html,body{height:100%;}
#body{
	position:relative;
	margin:0px auto;
	width:1000px;
	min-height:100%;
	overflow:hidden;}
#header{
}
#content{
	margin:0px 210px;
	padding-bottom:30px;
	background:#ddd;}
#left{
	position:relative;
	float:left;
	padding-bottom:30px;
	width:200px;
	background:#999;}
#right{
	position:relative;
	float:right;
	padding-bottom:30px;
	width:200px;
	background:#999;}
#footer{
	position:absolute;
	left:0px;
	right:0px;
	bottom:0px;
	height:30px;
	background:#bbb;}
</style>
<div id="body">
	<div id="header">
		header
	</div>
	<div id="left">
		left
	</div>
	<div id="right">
		right
	</div>
	<div id="content">
		content
		<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
		content
	</div>
	<div id="footer">
		footer
	</div>
</div>

Edited February 3, 2012 by Switch74

[param]

Ах да картинки:

Как видно контент в Хроме уходит за Slider причём если в других браузерах, его положение регулирует margin-bottom, то в Хроме в независимости от его размера, контент не двигается...

Edited February 3, 2012 by param

[Switch74]

#slider{
        height:285px;
        background:#fff;
        position:relative;
        z-index:10;
        margin-bottom:-440px;
        border-left:1px solid #b4b0b0;
        border-right:1px solid #b4b0b0;
}

зачем слайдеру margin-bottom:-440px;

вы явно перемудрили с отрицательными отступами из-за него у вас все и лезет под слайдер

[param]

Полоски на картинки уходят под него, они нужны чтобы создать видимость одинаковой высоты у колонок, поэтому такой и отступ.

[Switch74]

так тебе нужны две одинаковые вертикальные полоски отделяющие контент от левой и правой колонки?

[param]

Нет, полоски у меня есть. Проблема у меня отображена на картинках. В хроме почему то не хочет работать margin-top...

[Switch74]

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

[param]

Спасибо. Буду пробовать.

Edited February 4, 2012 by param

[param]

Нет всё равно не помогает... Хром отсчитывает марджин-топ от самого верха страницы, а остальные браузеры отсчитывают от меню. Что-то находится (или не находится)в этом меню, что заставляет все браузеры отсчитывать марджин от него, а Хром почему то игнорирует это что-то:

.dj-main {
    padding: 0;
    margin: 0;
    list-style: none;
    height: 30px;
    background: #fff url(../images/hor_menu1.gif) repeat-x;/*url(../images/three_0.gif)*/
    position: relative;
    z-index: 500;
    font-family: arial, verdana, sans-serif;
    width: auto;
}

.dj-main li.dj-up {
    display: block;
    float: left;
}

.dj-main li a.dj-up_a {
    display: block;
    float: left;
    height: 30px;
    line-height: 33px;
    color: #ccc;
    text-decoration: none;
    font-size: 11px;
    font-weight: bold;
    padding: 0 0 0 15px;
    cursor: pointer;
    background: url(../images/hor_menu1.gif);/*url(../images/three_0.gif)*/

}

.dj-main li a.dj-up_a span {
    float: left;
    display: block;
    padding: 0 15px 0 0;
    height: 30px;
    background: url(../images/hor_menu1.gif) right top no-repeat;/*url(../images/three_0.gif)*/
	background:url(../images/separator1.gif) no-repeat;/**/
	padding:0 8px 0 8px;
}

.dj-main li a.dj-up_a span.dj-drop {
    padding: 0 25px 0 0;
    background: url(../images/hor_menu1a.gif) no-repeat right top;/*url(../images/three_0a.gif)*/
}

.dj-main li:hover a.dj-up_a, .dj-main li.active a.dj-up_a {
    color: #fff;
    background: url(../images/hor_menu2.gif) no-repeat;/*url(../images/three_1.gif)*/
}

.dj-main li:hover a.dj-up_a span, .dj-main li.active a.dj-up_a span {
    background: url(../images/hor_menu2.gif) no-repeat right top;/*url(../images/three_1.gif)*/
	background:url(../images/separator1.gif) no-repeat right top;/**/
	padding:0 8px 0 8px;
}

.dj-main li:hover a.dj-up_a span.dj-drop, .dj-main li.active a.dj-up_a span.dj-drop {
    background: url(../images/hor_menu2a.gif) no-repeat right top;/*url(../images/three_1a.gif)*/
    padding-bottom: 3px;
}

.dj-main li.separator > a {
    cursor: default;
}

Как заставить Хром тоже отсчитывать марджин от меню?

Edited February 4, 2012 by param

[Switch74]

верстку меню то дай, а то css мало о чем говорит

[param]

<ul id="dj-main83" class="dj-main">
  <li class="dj-up itemid516 ">
    <a class="dj-up_a " href="/menu1.html">
     <span>Меню1</span>
    </a>
  </li>
</ul>

Edited February 5, 2012 by param

[Switch74]

У меня твое меню норм отображается все отодвигается вниз на высоту меню и никто ни куда не пропадает