Создание горизонтальной галереи

[100kd]

Хочу сделать горизонтальную, "резиновую" фотогалерею. Но загвоздка в том, что все браузеры молодцом, а ИЕ под номером 6 так и норовит слой

с параметром { overflow: hidden; } раздвинуть по всей ширине списка в котором содержатся фотографии.

Вопрос: возможно-ли что-то добавить, убавить, чтобы ИЕ6 прекратил раздвигать окно или есть какие-то альтернативные пути?

HTML:

   <div id="gallery">
	<a class="left_arrow png_bg" onclick="return(false)" href="#"></a>
	<div id="clip">
	 <ul>
	  <li><a href="#" class="img" style="background:url(files/gallery/1.jpg) top left no-repeat"><div class="pinta_zoom"></div></a></li>
	  <li><a href="#" class="img" style="background:url(files/gallery/2.jpg) top left no-repeat"><div class="pinta_zoom"></div></a></li>
	  <li><a href="#" class="img" style="background:url(files/gallery/3.jpg) top left no-repeat"><div class="pinta_zoom"></div></a></li>
	  <li><a href="#" class="img" style="background:url(files/gallery/4.jpg) top left no-repeat"><div class="pinta_zoom"></div></a></li>
	  <li><a href="#" class="img" style="background:url(files/gallery/5.jpg) top left no-repeat"><div class="pinta_zoom"></div></a></li>
	  <li><a href="#" class="img" style="background:url(files/gallery/6.jpg) top left no-repeat"><div class="pinta_zoom"></div></a></li>
	 </ul>
	</div>
	<a class="right_arrow png_bg" onclick="return(false)" href="#"></a>
   </div>

CSS:

#gallery { position: relative; }
#gallery ul { margin: 0; padding: 0; list-style: none; width: 2000px }
#gallery li { display: inline; vertical-align: middle; margin-top: 4px; margin-right: 4px; }
#gallery ul li { float: left; }

#clip { background:#FFF; overflow: hidden; height: 138px; margin-right: 19px; }

a.left_arrow { display: block; float: left; cursor: pointer; width: 19px; height: 138px; background:url(i/arrow_left.png); background-position: 0px 0; }

a.left_arrow:hover { background:url(i/arrow_left.png); background-position: -19px 0; }

a.right_arrow { display: block; position: absolute; right: 0; top: 0; width: 19px; height: 138px; float: left; cursor: pointer; 
				width: 19px; height: 138px; background:url(i/arrow_right.png); background-position: 0px 0; }

a.right_arrow:hover { background:url(i/arrow_right.png); background-position: -19px 0; }

Edited May 1, 2009 by 100kd

[Justnewone]

Похоже что у вас ширина не указана, скажите что-либо в px, ем или в % и overflow:hodden c white-space:nowrap

[100kd]

Похоже что у вас ширина не указана, скажите что-либо в px, ем или в % и overflow:hodden c white-space:nowrap

Указана ширина списка, в котором содержатся фотографии, а слой в котором лежит список, должен быть ризиновым и поэтому не имеет строгой ширины. Кстати, даже если применить nowrap к слою, в котором лежит три слоя, кнопочки так и вылетают наверх, но основная проблема в том, что средний слой со списком в ИЕ6 расширяется сильно.

Edited April 30, 2009 by 100kd

[Nekromancer]

запретить перенос строк

[100kd]

запретить перенос строк

Это наверное подойдет для того чтобы кнопочки прокрутки не соскакивали - это да, вы правы.

Основная проблема в том, что слой с фотографиями расходится по всей ширины списка в ИЕ6.

[Nekromancer]

покажи css колонок

[100kd]

покажи css колонок

Стили списков и слоев

#gallery ul { margin: 0; padding: 0; list-style: none; width: 2000px }

#gallery li { display: inline; vertical-align: middle; margin-top: 4px; margin-right: 4px; }

#gallery ul li { float: left; }

#gallery { position: relative; white-space: nowrap; }

#gallery .img { display: block; width: 220px; height: 130px; cursor: pointer; }

#clip { background:#FFF; overflow: hidden; height: 138px; margin-right: 19px; }

Стили кнопочек для прокрутки

a.left_arrow { display: block; float: left; cursor: pointer; width: 19px; height: 138px; background:url(i/arrow_left.png); background-position: 0px 0; }

a.left_arrow:hover { background:url(i/arrow_left.png); background-position: -19px 0; }

a.right_arrow { display: block; position: absolute; right: 0; top: 0; width: 19px; height: 138px; float: left; cursor: pointer; 
				width: 19px; height: 138px; background:url(i/arrow_right.png); background-position: 0px 0; }

a.right_arrow:hover { background:url(i/arrow_right.png); background-position: -19px 0; }

Колонки правая и левая

#right { position: absolute; top: 105px; right: 30px; width: 16.3em; }

#left { margin-left: 30px; margin-right: 20em; margin-top: 2em; margin-bottom: 2em; }

Edited April 30, 2009 by 100kd

[Justnewone]

Пока Вы не скажете блоку, в котором ожидаете полосу прокрутки ширину и overflow (не хидден, погорячился, визибл конечно), в IE6 ничего не выйдет, никак, никаким образом, вообще никак.

[100kd]

Justnewone, спасибо! Ваши советы и метод тыка полностью помогли!

Ааааа!11 Чертов ИЕ, я победил тебя!

*ИЕ6 валялся в грязи и плевался кровью*

Edited May 1, 2009 by 100kd

[100kd]

*ИЕ6 быстро вскочил на ноги и ударил ногой ниже пояса*

Какая неприятная новость для меня: eсли изменять ширину окна в ИЕ6, то блоки с { position: absolute; right: 0px; } ведут себя очень плохо, оставаясь на месте как вкопанные.

Edited May 1, 2009 by 100kd