z-index vs ie

[WalkMan]

Привет.

Зашел в ступор и не могу выйти,

подпихните в нужном направлении

есть код

		<div class="content">
			<div class="block">
				<a href="#"><em>sdfdfdsfsdfsdf</em></a>
			</div>
			<div class="block">
				<a href="#"><em>sdfdfdsfsdfsdf</em></a>
			</div>			<div class="block">
				<a href="#"><em>sdfdfdsfsdfsdf</em></a>
			</div>			<div class="block">
				<a href="#"><em>sdfdfdsfsdfsdf</em></a>
			</div>			<div class="block">
				<a href="#"><em>sdfdfdsfsdfsdf</em></a>
			</div>			<div class="block">
		</div>

есть стили

.block { float: left; width: 200px; height: 200px; background-color: #000; margin: 20px; position: relative; }
.block em { display: none; }
.block a { position: absolute; display: block; width: 10px; height: 10px; top: 150px; left: 150px; background-color: #fff;}
.block a:hover em { display: block; width: 150px; height: 30px; background-color: #ff0000; position: absolute; top: -15px; left: 0px; z-index: 5 }

есть результаты

верхний фф/ нижний ие6

как починить ие?

пример

Edited March 24, 2010 by WalkMan

[hf3]

Старая бага

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

[WalkMan]

Старая бага

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

в отношении родителей

только если каждому блоку задавать на одну единицу меньше т.е. z-index10 z-index9 z-index8 ...

с зумом баловался - не помогло

[psywalker]

Блин, ну ИЕ конеш выдаёт, как обычно. Слушай, во-первых если найдёшь решение, обязательно сообщи, а во-вторых, как вариант, может попробовать через JS раздать каждому последующему блоку по меньшему z-index; ?

[WalkMan]

Блин, ну ИЕ конеш выдаёт, как обычно. Слушай, во-первых если найдёшь решение, обязательно сообщи, а во-вторых, как вариант, может попробовать через JS раздать каждому последующему блоку по меньшему z-index; ?

да мне выот тоже такое решение подсказали

только я его пока повесил не с явой а с подключением "csshover.htc"

ну и в цсс назначил свойство аля

.block:hover { z-index: 10; }

пс

может где в спецификации официально этот баг описан?

что бы на работе предъявить

[psywalker]

да мне выот тоже такое решение подсказали

только я его пока повесил не с явой а с подключением "csshover.htc"

ну и в цсс назначил свойство аля

.block:hover { z-index: 10; }

пс

может где в спецификации официально этот баг описан?

что бы на работе предъявить

Да блин, этих багов у них до хрена и больше, замучаешься предъявлять. Наверное твоё решение самое лучшее. Если кто нибудь ещё лучше не подскажет)

[WalkMan]

Да блин, этих багов у них до хрена и больше, замучаешься предъявлять. Наверное твоё решение самое лучшее. Если кто нибудь ещё лучше не подскажет)

ага

подождем

мот кто что дельное предложит

[hf3]

А это кстати по факту и не баг, а просто “свой” путь.

http://cssing.org.ua/2008/12/07/internet-explorer-z-index/

Почитай тут

[WalkMan]

А это кстати по факту и не баг, а просто “свой” путь.

http://cssing.org.ua/2008/12/07/internet-explorer-z-index/

Почитай тут

в общем все об одном пишут

походу придеться одно из двух решений, описанных выше, вешать

[psywalker]

в общем все об одном пишут

походу придеться одно из двух решений, описанных выше, вешать

Покажешь потом тада.

[WalkMan]

Покажешь потом тада.

так а что там показывать

все на словах решили

см линк спервого поста

прикрутил htc и ховер на блок повесил

[psywalker]

так а что там показывать

все на словах решили

см линк спервого поста

прикрутил htc и ховер на блок повесил

Ааа, тада да, я думал, ты отсюда чё нить возьмёшь http://cssing.org.ua/2008/12/07/internet-explorer-z-index/

[hf3]

вот сейчас просидев 2 часа максимум что смог придумать это…

 <div class="block"  onmouseover="this.style.zIndex =  this.style.zIndex + 5" onmouseout="this.style.zIndex =this.style.zIndex -5" >
				<a href="#"><em>sdfdfdsfsdfsdf</em></a>
</div>

В идеале вынести в отдельный файл .js для IE6 и IE7 - несколько строчек кода.

А если есть jquery то можно решить одной строкой.

Подумал ещё

раз уж ИЕ блоки с одинаковым индексом упорядочивает по место расположению в верстке - т.е. чем дальше от родительского тега - тем элементы “выше” то поступить по китайски… или по еврейски… Или кто там у них пишет справа налево…

и вместо

.block { float: left; width: 200px; height: 200px; background-color: #000; margin: 20px; position: relative; }

написать

.block { float: right; width: 200px; height: 200px; background-color: #000; margin: 20px; position: relative; }

Кроме того можно

1) отодвинуть блоки друг от друга

2) сместить всплывающую ссылку.

[mishka]

Разве это не помогло

.block:hover { z-index: 1; }

?

Я вот проверяю все ок, да и по логике это должно помочь. Единственное что ненравится мне подход с использованием csshover.htc, а так все ок.

Блин, посмотрел последний пост и подумал что задачу еще не решили..

Потом прочитал пост где ТС говорит что во всем разобрался.

Edited March 24, 2010 by mishka2

[hf3]

.block:hover

6 ослик понимает ховер только для тега <a> вроде как

[mishka]

Да есть такой чудовый файлик как csshover.htc, который заставляет ие6 понимать и ховер и актив на все элементы.

[hf3]

Да файлик то есть, но как то не нравится он мне. Костыль на костыле и костылем погоняет…

Это приблизительно тоже самое что реализация svg в IE

Но работать - работает.

[ekosyakin]

Ни один костыль из выше приведенных не помогает, а если помогает, то плывет другое и тоже ничем не лечиться...

http://dermika-salon.ru/index.php

Может, есть у кого какие мысли...

Тут проблема следующая: выплывающее меню в IE7 (Услуги) залазит за блок #logo, там где логотип, название и телефон.

Ночь просидел - не знаю что и делать...

[klierik]

#menu_wrap {position: relative; z-index: 9;}

[ekosyakin]

Спасибо!!!

Ночью не всегда полезно верстать