Доброго времени суток всем.
Есть такая проблема:
Есть картинка - схема столов в виде прямоугольников. Нужно было сделать для этой картинки своеобразный image mapping, чтобы при наведении на стол, он как то выделялся и при щелчке срабатывал определенный функционал.
Проблема заключается в том что в ИЕ 9,8,7, hover срабатывает только на границе элемента. Внутреннюю область они как бы не видят вообще. Как я понял, некорректно отрабатывает a{ display:block }. Если добавить фон, то работает на ура, но фон меня совершенно не устраивает. background: transparent так же не работает. Поиск по гуглу ничего не дал.
Что делать?
Заранее спасибо
Код этого всего:
<style>
#map {
position:relative;
width: 945px;
height: 635px;
}
#tab-1 img {
margin: 0;
padding: 0;
width: 945px;
height: 635px;
border: 2px solid #696566;
}
#tab-1 ul{
margin: 0;
padding: 0;
list-style: none;
}
#tab-1 li a {
position:absolute;
display:block;
text-indent: -9999px;
}
#tab-1 ul a:hover {
border: 2px solid red;
}
/* Далее идут размеры и позиционирование ссылок */
</style>
<div id="map" usemap="#tables">
<img src="css/img/schema.jpg" alt="schema" style ="width: 945px; height: 635px; border: 2px solid #696566;" />
<ul>
<li><a href="#" id="table-1"></a></li>
<li><a href="#" id="table-2"></a></li>
<li><a href="#" id="table-3"></a></li>
<li><a href="#" id="table-4"></a></li>
...................................................
<li><a href="#" id="table-24"></a></li>
</ul>
</div>
