И снова z-index в ie8-9

[gekas]

В ie8-9 Элементы с классом m-pointer находятся уровнем ниже main-img. Z-index не помогает при том, что элементы позиционированные.

......           <div class="m-pointer p1" id="p1"></div>           <div class="m-pointer p2" id="p2"></div>           <div class="m-pointer p3" id="p3"></div>           <div class="m-pointer p4" id="p4"></div>           <div class="m-pointer p5" id="p5"></div>           <div class="m-pointer p6" id="p6"></div>           <div class="m-pointer p7" id="p7"></div>           <div class="m-pointer p8" id="p8"></div>           <div class="m-pointer p9" id="p9"></div>           <img src="img/house.jpg" class="main-img">........

 

 

 .content{    position: relative;} .main-img{    display: block;    width: 100%;} .m-pointer{    position: absolute;    cursor: pointer;    width: 43px;    height: 53px;}

 

Демо: gekas. e3w. ru /gidrosbor/

 

Как решить проблему?

Edited August 27, 2014 by gekas

[hypnocolor]

.main-img тоже задайте z-index, 10 например. А для .m-pointer, соответственно, что-то побольше.

Edited August 27, 2014 by hypnocolor

[gekas]

  On 8/27/2014 at 11:38 AM, hypnocolor said:

.main-img тоже задайте z-index, 10 например. А для .m-pointer, соответственно, что-то побольше.

Пробовал - не работает. Когда поднимаем через z-index .m-pointer и добавляем ему outline, то видим, что m-pointer находится визуально уровнем выше, НО если прописать

.m-pointer:hover{    outline: 5px solid grey;}

В ie8 опять таки ничего не происходит. У меня скрипт прописан с использованием события mouseover для .m-pointer, который тоже не работает в ie8-9. Не могу определить причину. При чем если картинку .main-img сделать в пол ширины(что бы не все .m-pointer ы были над ней), то m-pointer ы, под которыми нет картинки - откликаются на наведение нормально

Edited August 27, 2014 by gekas