Javascript-форум (https://javascript.ru/forum/)
-   (X)HTML/CSS (https://javascript.ru/forum/xhtml-html-css/)
-   -   Проблема с z-index в IE (https://javascript.ru/forum/xhtml-html-css/30655-problema-s-z-index-v-ie.html)

Allality 11.08.2012 02:04

Проблема с z-index в IE
 
Использую небольшой CSS прием для отображения "подсказки" при наведении на картинку: dveriekaterinburg.ru (желто-черная картинка со знаком вопроса).

В Chrome, Opera отображается нормально, но в IE текст от соседнего окна накладывается поверх. Думал проблема с z-index, но не уверен. Подскажите, как можно исправить?

Вот код:

span.vopros {
	position: relative;
	cursor: help;
}
 
span.vopros span.otvet {
	display: none;
}

 
span.vopros:hover span.otvet {
	display: block;
	z-index: 1;
	position: absolute;
	left: 18px; top:18px;
	width: auto;
	padding: 5px 9px 7px 9px;
	border: 1px solid #000000;
	background-color: #fffa2d;
	text-align: justify;
	color: #000;
}

Deff 11.08.2012 02:08

Allality,
необходимый Код HTML вместе с соседним окном выложите (или лучше ссылку на страницу с траблом

Allality 11.08.2012 11:10

Прямо на главной странице по ссылке, указанной выше.

HTML код оттуда:

<div class="vopros_zn">
<span class="vopros"><img src="/kartinki/vopros.png" /><span class="otvet" style="width: 300px;">
<strong>Глухое полотно</strong> - простая дверь без каких-либо вставок из стекла, а также без рельефных элементов.<br /><br />
<strong>Филенчатое полотно</strong> - отличается от глухого тем, что имеет рельефные элементы.<br /><br />
<strong>С матовым стеклом</strong> - дверь с полупрозрачным матовым стеклом (еще его называют сатиновым).<br /><br />
<strong>С витражным стелком</strong> - дверь с художественным рисунком на стекле, иногда объемным.<br /><br />
<strong>Триплекс</strong> - дверь с многослойным стеклом, которое при ударе не разлетается на осколки.
</span></span>
</div>

bes 11.08.2012 11:55

Не совсем понял, что на что накладывается, если текст "Ваше мнение о магазине", так он и в хроме всегда выше

Allality 11.08.2012 13:03

На карточки дверей, вот картинка: http://img9.imageshack.us/img9/1641/cssz.png

Deff 11.08.2012 13:13

span.vopros {
	position: relative;
	cursor: help;
}
 
span.vopros span.otvet {
	display: none;
}

 
span.vopros:hover span.otvet {
	display: block!important;
	z-index: 1000!important;
	position: absolute!important;
	left: 18px; top:18px;
	width: auto;
	padding: 5px 9px 7px 9px;
	border: 1px solid #000000;
	background-color: #fffa2d;
	text-align: justify;
	color: #000;
}

bes 11.08.2012 13:14

Эта проблема в IE7

Allality 11.08.2012 13:41

Deff, не помогло. (

bes, у меня в IE9 (9.0.4) такой глюк.

Deff 11.08.2012 13:43

Allality,
Ие 7-8 - работает - дайте ссылку на реальную страницу- возможно нет учета еще чего то

bes 11.08.2012 13:56

У меня по указанному адресу в IE9 не работает только тогда, когда переключаюсь в режим совместимости с IE7

Allality 11.08.2012 15:05

Цитата:

Сообщение от bes (Сообщение 196638)
У меня по указанному адресу в IE9 не работает только тогда, когда переключаюсь в режим совместимости с IE7

Можно исправить как-то? Я вроде вообще настройки IE не трогал. Не хочется так оставлять, ведь часть покупателей использует IE...

Deff, каталог на главной странице. HTML часть каталога, указанная выше грузится через Ajax, а CSS находится в статичном файле.

Deff 11.08.2012 15:31

Allality,
Хм - а на сайте такая же феня- как и в Вопросе

Пробуйте еще

Цитата:

.vopros_zn {
left: 205px;
position: relative!important;
z-index:2000!important;
top: 17px;
}
Красным - добавки

Allality 11.08.2012 16:12

Не помогло.

Deff 11.08.2012 16:53

Allality,
У меня возникла идея - подозрение - что суть в динамической установке фона

Пробуйте заменить прошлое css
span.vopros {
	position: relative;
	cursor: help;
}
 
span.vopros span.otvet {
	display: none;
	z-index: 1000!important;
	position: absolute!important;
	left: 18px; top:18px;
	width: auto;
	padding: 5px 9px 7px 9px;
	border: 1px solid #000000;
	background-color: #fffa2d;
	text-align: justify;
	color: #000;
}

 
span.vopros:hover span.otvet {
	display: block!important;

}

Allality 11.08.2012 21:14

Также работает. :(

vadim5june 11.08.2012 21:24

Цитата:

Сообщение от Allality (Сообщение 196727)
Также работает. :(

по идее z-index надо увеличить не span а одному из его родителей например div class="vopros_zn"

Deff 11.08.2012 21:38

Цитата:

Сообщение от vadim5june
по идее z-index надо увеличить не span а одному из его родителей например div class="vopros_zn"

:write: Ды родителю увеличивали(пост 12) - тут где-то в верстке нун менять ( данный контент грузится аяксом походу

vadim5june 11.08.2012 22:09

Цитата:

Сообщение от Deff
Ды родителю увеличивали(пост 12)

значит родителю родителя итд-вообще надо дерево составить и найти у этих элементов общего родителя

Deff 11.08.2012 22:31

Allality,
Вообщем Вы не туда вставляли потестил всё ок

Вставьте сразу перд тегом закрытия body

Такой код
<style type="text/css">
div.vopros_zn{
  position:relative;
  z-index:100;
}
</style>
</body>


Часовой пояс GMT +3, время: 18:37.