div'ы и ie6

[bobo]

Приветствую.

Имеем следущий код:

#body {
	width:1000px;
	height:100%;
	margin:0 auto;
	display:block;
}
#left {
	width:62px;
	height:auto;
	-height:expression(this.scrollHeight < 221 ? "221px" : "auto");	
	min-height:221px;
	background:#e0e0e0 url(../images/index_06.jpg) no-repeat top;
	-margin:-13px 0 0 0;
	display:inline;
	float:left;
}
#right {
	width:937px;
	height:auto;
	-height:expression(this.scrollHeight < 221 ? "221px" : "auto");	
	min-height:221px;
	-margin:-13px 0 0 0;
	display:inline;
	float:left;
}
#right_top_left {
	width:286px;
	height:30px;
	display:inline;
	float:left;
}
#right_top_right {
	width:651px;
	height:30px;
	background-color:#e0e0e0;
	display:inline;
	float:left;
}

    <div id="body">

        <!--  Левая часть  !-->
        <div id="left"></div>
        <!--  конец Левая часть !-->

        <!--  Правая часть  !-->
        <div id="right">

            <!--  Правая часть верх слева  !-->
            <div id="right_top_left">

            	<h1>Главная страница</h1>

            </div>
            <!-- конец Правая часть верх слева  !-->

	    <!--  Правая часть верх справа  !-->
            <div id="right_top_right">



            </div>
            <!--  конец Правая часть верх справа  !-->

        </div>
        <!--  конец Правая часть !-->

    </div>

Везде все ок, кроме ie6

В нем div "right_top_right" уходит под div "right_top_left", при этом если для "right_top_right" поставить "-width:649px;", дивы становятся как и должны, НО "right_top_right" не достает до края <div id="body"> как раз эти 2 пиксела!!!

Странно, что display:inline; не помогает

Как вылечить ?

[Gaspode]

display:inline;
float:left;

Глупость. Эти свойства несовместимы по определению.

Edited May 13, 2011 by Gaspode

[tt48]

можно попробовать поставить word-space:0; для обертывающего блока.

[psywalker]

bobo

Что это такое: -margin:-13px 0 0 0; ??

Gaspode

display:inline;

float:left;

Глупость. Эти свойства несовместимы по определению.

Дружище, не говори ерунды, эти вещи в ИЕ6 нужны для того, чтобы вылечить там старый трёх-пиксельный баг.

[bobo]

display:inline;
float:left;

Глупость. Эти свойства несовместимы по определению.

И давно ?

bobo

Что это такое: -margin:-13px 0 0 0; ??

Если убрать, то в том же ie6 появляется отступ от верхнего diva

можно попробовать поставить word-space:0; для обертывающего блока.

Не помогает

Edited May 13, 2011 by bobo

[bobo]

Еще момент.

Дивы left и right:

#left {
	width:62px;
	height:auto;
	-height:expression(this.scrollHeight < 221 ? "221px" : "auto");	
	min-height:221px;
	background:#e0e0e0 url(../images/index_06.jpg) no-repeat top;
	-margin:-13px 0 0 0;
	display:inline;
	float:left;
}
#right {
	width:937px;
	height:auto;
	-height:expression(this.scrollHeight < 221 ? "221px" : "auto");	
	min-height:221px;
	-margin:-13px 0 0 0;
	display:inline;
	float:left;
}

    <div id="body">

        <!--  Левая часть  !-->
        <div id="left"></div>
        <!--  конец Левая часть !-->

        <!--  Правая часть  !-->
        <div id="right"></div>
        <!--  конец Правая часть !-->

    </div>

В левом div к верху прижата картинка с текстом "background:#e0e0e0 url(../images/index_06.jpg) no-repeat top;" + цвет всего div задан. Как лучше всего реализовать, что б "height" этого div увеличивался в зависимости от наполняемости соседнего div "right" ?

Т.е. нужно, что б <div id="left"></div> был постоянно прижат верхним краем к шапке, а нижним - к футеру. Пробывал ставить ему "height:100%;" - растягивается до определенного момента и останавливается.

[Gaspode]

Дружище, не говори ерунды, эти вещи в ИЕ6 нужны для того, чтобы вылечить там старый трёх-пиксельный баг.

Да о_О? Первый раз слышу. Ну ладно, извините

можно попробовать поставить word-space:0; для обертывающего блока.

word-spacing тогда уж.

Edited May 13, 2011 by Gaspode

[bobo]

Блин, час туплю, нечего в голову не лезет

Суть: центральная часть страницы имеет вертикальную полосу слева, которая, как я уже писАл выше, верхом стыкуется к хедеру, низом к футеру. Вверху этой полоски - изображение.

Как это реализовать ?

[bobo]

По пятницам тут всегда так тихо ?

Пошевелил чутьчуть мозгами, родил следущую конструкцию:

#content {
	width:1000px;
	height:auto;
	position:absolute;
}
#content p {
	width:930px;
	height:auto;
	display:inline;
	float:right;
}
#fototext {
	width:62px;
	height:221px;
	position:absolute;
	top:0;
	left:0;
	background:url(../images/index_06.jpg) no-repeat;
	z-index:2;
}
#left_line {
	width:62px;
	height:100%;
	background-color:#e0e0e0;
	position:absolute;
	top:0;
	left:0;
	z-index:1;
}

    <div id="content">

        <div id="fototext"></div>
        <div id="left_line"></div>

        <p>САМ КОНТЕНТ</p>

    </div>

Вроде все ок, за исключением гребаного ie6 Не рисуется <div id="left_line"></div> и <div id="content"> рисуется с промежутком от вышестоящего div (лечится margin-top:-13px, про 3х пиксельный баг слышал, а тут почему такой большой промежуток - непонятно).

Как быть с <div id="left_line"></div> ?

[bobo]

Ээм, ап

[buddah]

Вы любите извращения? Их есть у меня:

Сделать левый бордер у дива с контентом с помощью border-image

Будет работать только в новых браузерах.

[buddah]

Случайно наткнулся на древнюю статью, которая может помочь.

Суть в том, что можешь поставить картинку нужной ширины в том месте, где должна начинаться твоя полоска и задать ей repeat-y. А сам текст контента отодвинуть паддингом вправо.Таким образом картинка будет продолжать клонировать себя на всю высоту контента и растягиваться вместе с ним.

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

Edited May 13, 2011 by buddah

[bobo]

Спасибо, но уже сам справился.