[HTML,CSS] Блочная верстка отрицательными полями, баг в IE6

Inferno80

Основываясь на "«Резиновая вёрстка»: используем отрицательные поля" был сделан сайт, и всё нормально было без косяков, пока не попросили сделать его статичным в 1000px по центру, а не резиновым. Левая и правая колонки по 250px, центральный 500px.
В опере и фарефоксе отображается всё нормально

в 6 эксплорере появилась непонятная полоса в 3px между левой и центрально колонкой

Из-за неё уплывает центральный блок, и чтоб он оставался на месте приходится делать его в 497px...что дает полосу в 3px в фаре и опере между центральной и правой колонкой
HTML

<div id="master-block">

   

   <div id="block">

           

           <div id="container">

               

               <div id="content">

                   <div id="left"></div>      

                   <div id="main"></div>

               </div>

           

           </div>

           

           <div id="right"></div>

               

               

   </div>

</div>

CSS

#master-block {

   background: #ededed;

}

#block{

   margin-left: auto;

   margin-right: auto;

   width: 1000px;

   

}

#container {

   width: 1000px;

   float: left;

   margin-right: -250px;

   height: 800px;

   background-color: gray;

   

}

#content{

   width: 750px;

   margin-right: 250px;

   height: 700px;

   background-color: orange;  

}



#left {

 width: 250px;

 height: 700px;

 float: left;

 background-color: green;  

}



#main {

 width: 497px;

 margin-left: 250px;

 height: 700px;

 background-color: blue;



}



#right{

   width: 250px;

   float: right;

   height: 700px;

   background-color: yellow;

}

Откуда вылазит эта шняга? и так и так уже крутил

З.Ы. в таблицы переверстывать и некогда, и по ТЗ невозможно
З.Ы.Ы. максимально упростил для наглядности

pitrik2

у меня в лисе и опере зато полоска между синим и желтым
судя по твоем скриншоту - у тебя там тоже тень какаято а в ие нету
у меня в ИЕ7 4 колонки!
четвератя серая - справа на всю высоту

pitrik2

а все
разобрался
вощем непонятно 2 вещи
1) то что спрашивал автор
2) почему в ие результат не по центру, он видимо игнорирует margin-left: auto; margin-right: auto;

pitrik2

в общем тебе нужно тупо поставить синий и зеленый рядышком
тоесть тупо говоришь синему: float:right
и тогда все работает
окончательный вариант (плюс добавил выравнивание по центру)



#master-block {

   background: #ededed;

   text-align:center;

}

#block{

   margin-left: auto;

   margin-right: auto;

   width: 1000px;

   text-align:left;  

}

#container {

   width: 1000px;

   float: left;

   margin-right: -250px;

   height: 800px;

   background-color: gray;

}

#content{

   width: 750px;

   margin-right: 250px;

   height: 700px;

   background-color: orange;  

}



#left {

 width: 250px;

 height: 700px;

 float: left;

 background-color: green;  

}



#main {

 width: 500px;

 float:right;

 height: 700px;

 background-color: blue;

}



#right{

   width: 250px;

   float: right;

   height: 700px;

   background-color: yellow;

}

Inferno80

оппа, сэнкс, будет исправлять

мне тут ещё посоветовали поковыряться в шаблонах http://blog.html.it/layoutgala/ ....занимательный такой сайт, мож кому-нить пригодится

pitrik2

а бага значит такая:



<head>

<style type="text/css">



#left {

 width: 100px;

 height: 200px;

 float: left;

 background-color: green;  

}



#right {

 width: 100px;

 height: 200px;

 margin-left:100px;

 background-color: blue;

}

</style>

</head>

<body>

    <div id="left">left</div>      

    <div id="right">right</div>

</body>

почему между right и left в ие 3 пикселя?
http://www.positioniseverything.net/explorer/threepxtest.htm...

Оставить комментарий