проблема с position:absolute в IE7

[webbis]

Здравствуйте,

проблема вот в чем:

Сайт: http://photo.prime-gr.ru. На главной странице идут друг за другом маленькие картинки (float). При нажатии вываливается абсолютно позиционированная большая картинка. Этот блок привязан к первому, родительскому. Так вот, во все нормальных браузерах эта картинка поверх остальных. А в IE она под ними.

Привожу часть кода:

HTML:

<div class="photos">

<ul>
<li><a href="#" onclick="$('#js_img_204').show('slow'); "><img src="/upload/gallery/images/small/2a9b0a9b9ced4b794923303cee830586.jpg" border="0" height="40" /></a>
  <div id="js_img_204" class="overview"><a rel="lightbox-tour" href="/upload/gallery/images/2a9b0a9b9ced4b794923303cee830586.jpg" title=""><img title="Перейти к фото" src="/upload/gallery/images/humb/2a9b0a9b9ced4b794923303cee830586.jpg" border="0"/></a></div>
</li>

<li><a href="#" onclick="$('#js_img_205').show('slow'); "><img src="/upload/gallery/images/small/c751ae4bbfb72f6a78898ec683499c53.jpg" border="0" height="40" title="Нажмите, чтобы увеличить"/></a>
  <div id="js_img_205" class="overview"><a rel="lightbox-tour" href="/upload/gallery/images/c751ae4bbfb72f6a78898ec683499c53.jpg" title=""><img title="Перейти к фото" src="/upload/gallery/images/humb/c751ae4bbfb72f6a78898ec683499c53.jpg" border="0"/></a></div>

</li>

</div>

CSS:

.photos {margin-top:43px; margin-left:30px; margin-right:30px; overflow:hidden}
		.photos img {margin-bottom:14px}
		.photos .photo {position:relative; display: inline;}

		.photos ul { margin:0; padding:0; list-style:none; }
		.photos ul li {  position:relative; display: inline; height:54px; float:left }

		.overview {position:absolute;  top:0px; left:0px; display: none;  z-index:100 !important;  zoom:1; height:128px; width:100px;}

p.s. весь инет перерыл, но решения так и не нашел.

[s0rr0w]

photos ul li { position:relative; display: inline; height:54px; float:left }

После float: left свойство display: inline не имеет смысла, так как элемент станет блочным.

Добавьте сюда z-index: 1, должно помочь

[dyadya]

Собака зарыта скорее всего здесь:

.overview {position:absolute;  top:0px; left:0px; display: none;  z-index:100 !important;  zoom:1; height:128px; width:100px;}

Видимо почему-то не срабатывает zoom

Здесь статьи по теме

[webbis]

  s0rr0w said:

photos ul li { position:relative; display: inline; height:54px; float:left }

После float: left свойство display: inline не имеет смысла, так как элемент станет блочным.

Добавьте сюда z-index: 1, должно помочь

Добавление cюда z-index привело к потере работоспособности в остальных браузерах.

[webbis]

  dyadya said:

Собака зарыта скорее всего здесь:

.overview {position:absolute;  top:0px; left:0px; display: none;  z-index:100 !important;  zoom:1; height:128px; width:100px;}

Видимо почему-то не срабатывает zoom

Здесь статьи по теме

самое интересное что родительский блок имеет свойство hasLayout. Все как написано в статье. Попробовал применит все фиксы для IE.

Видимо из-за того что блок hidden изначально, на него не накладываются некоторые свойства при загрузке страницы.