[Вечный Студент]

Доброго времени суток всем.

Есть такая проблема:

Есть картинка - схема столов в виде прямоугольников. Нужно было сделать для этой картинки своеобразный 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>