И снова ИЕ, и снова ссылки
Доброго времени суток всем.
Есть такая проблема: Есть картинка - схема столов в виде прямоугольников. Нужно было сделать для этой картинки своеобразный image mapping, чтобы при наведении на стол, он как то выделялся и при щелчке срабатывал определенный функционал. Проблема заключается в том что в ИЕ 9,8,7, hover срабатывает только на границе элемента. Внутреннюю область они как бы не видят вообще. Как я понял, некорректно отрабатывает a{ display:block }. Если добавить фон, то работает на ура, но фон меня совершенно не устраивает. background: transparent так же не работает. Поиск по гуглу ничего не дал. Что делать?:cray::help: Заранее спасибо :thanks: Код этого всего:
<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>
|
Цитата:
<style type="text/css">
a {
display: block;
width: 100px;
height: 100px;
border: 0;
background-color: red;
}
</style>
<body>
<a href='#'></a>
</body>
На моей 8-ке все работает. Да и ранее я, описаного тобой "эфекта", не замечал... :) |
Да, я работает, так как у вас задан фон. А попробуйте без него...требуется прозраччная ссылка...
Вот что называется поспал: нужно было добавить однопикксельный рисунок в фон без повторения. Все заработало :) всем спасибо :) |
Цитата:
|
| Часовой пояс GMT +3, время: 08:43. |