Горизонтальный скролл в IE

[d0ublezer0]

В опере - нет, в ФФ - нет, в хроме - нет.

В IE8 - есть.

Проблема в верхней части страницы, два блока с мороженым (слева и справа) растягивают страницу, не смотря на то, что для контейнера #main_cloth задано overflow:hidden;

Вот страничка, логин/пароль km

Edited August 16, 2010 by d0ublezer0

[mishka]

В ие8 все так же как и в фф

[d0ublezer0]

Мишка, у тебя монитор какого размера? У меня вот 22 и тоже всё хорошо, когда окно развернуто на весь экран. Попробуй потянуть окошко?

[mishka]

1600px

Конечно сжимал, все как в фф

Баг найти немогу, но так на вскидку - блоку который должен обрезать говоришь overflow:hidden уже стоит, добавь еще и position:relative

[d0ublezer0]

И то и другое стоит.

Сейчас проверил в седьмом - тоже скролл

Edited August 17, 2010 by d0ublezer0

[Vlad]

overflow и не будет срабатывать, потому что проблема в IE в правом блоке #cream_right.

[d0ublezer0]

Вот почему? Этот блок в контейнере с overflow:hidden. По идее, должен скрываться.

[Vlad]

#cream_right в IE распирает родительский блок и получается что исходная ширина больше чем окно браузера. При "обрезании" учитывается что ширина большая и скрывается все что за ее пределами, но в данном случае не там где надо. Причина понятна, теперь надо решить как ее побороть.

[d0ublezer0]

Влад, я прекрасно понимаю, что кого распирает - это же видно даже без фаербага.

Как победить?

[Vlad]

Вот что любопытно. Скопировал из IE в виде текстового файла, скачал отдельно фоны для шапки и... и все хорошо, без полос прокрутки показывается. Сейчас поищу баг, где-то он явно есть, как суслик.

[Vlad]

Классика победила. Тестировал в корявом "Средства разработчика", поэтому надо проверить будет идею на рабочем сайте.

Ставишь для #main_cloth position: relative, для вложенных слоев #cream_right и #cream_left position: absolute.

Центральная картинка только слезает вправо, надеюсь это будет легко поправить.

[d0ublezer0]

Да, действительно, скролл исчезает.

Теперь баг с картинкой: почему фон сдвигается, когда background-position: top center?

Опять же, в IE

Edited August 17, 2010 by d0ublezer0

[Vlad]

Да все по той же причине, что ширина в IE больше чем кажется.

[Lincky]

#main_cloth {position:relative; overflow:hidden;}

Это решает проблему для ие6-7.

Если у вложенных блоков стоит relative и в сумме они шире, чем родитель, или у них заданы отрицательные магрины, то для родителя помимо overflow:hidden надо обязательно ставить relative. Естественно такое только в IE

[d0ublezer0]

Не решает. Вернее, не совсем. И не только для 6-7, а и для 8.

Скролл пропадает, да. Но вот позиция фона у #main_cloth сползает вправо, если #cream_right не убирается в экран.

Как исправить - пока не придумал.

[Vlad]

Попробовать добавить отрицательный margin-left для центральной картинки. Значение - ширина "свисающей" правой картинки. Можно посмотреть в Фотошопе или экспериментально подобрать.

[d0ublezer0]

Картинка является фоном. Его маргином не спозиционируешь.

Думаю дальше.

[Vlad]

Говоря про центральную картинку имел в виду элемент, где фон располагается.

[d0ublezer0]

В таком случае смещаются и слои с кремом.

Пипец.

Надо вообще как-то по другому сверстать

*Ушел думать*

Edited August 18, 2010 by d0ublezer0

[d0ublezer0]

В общем, получилось вот так:

<div id="cream_container">
	<div id="cream_right"></div>
	<div id="cream_left"></div>
</div>
<div id="main_cloth">
	<a href="/" id="to_root"><img src="/templates/km/images/shim.gif" width="1" height="1" /></a>
</div>

#main_cloth {
	background:url(/templates/km/images/bg_main_cloth.jpg) repeat-x center top;
	height:338px;
	overflow: hidden;
	position:relative;
}
#cream_right {
	background:url(/templates/km/images/cream_right.png) no-repeat bottom right;
	height:339px;
	left:50%;
	margin-left:-40px;
	position:absolute;
	width:867px;
	bottom:0;

}
#cream_left {
	background:url(/templates/km/images/cream_left.png) no-repeat bottom right;
	bottom:0;
	height:339px;
	margin-right:156px;
	position:absolute;
	right:50%;
	width:708px;
}
#cream_container {
	position:absolute;
	height:339px;
	width:100%;
	overflow: hidden;
	z-index:1;
}

#to_root {
	display:block;
	font-size:0;
	height:338px;
	left:50%;
	margin-left:-180px;
	position:absolute;
	width:360px;
	z-index:2;
}

Только есть одна проблема: ссылка #to_root, не смотря на больший z-index, в IE не доступна, перекрывается #cream_container'ом.

Посоветуйте, как исправить

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

UPD:

А, блин, так чего это я? Переложил ссылку в #cream_container и всё пучком.

Усё, спасибо всем. Все вопросы решены.

Edited August 18, 2010 by d0ublezer0