Здравствуйте........на странице сайта есть таблица с фоновым изображением........долустим на ней нарисованы летающие персонажи хаусно расположенные, которых нужно щёлкнуть и появиться модальное окно с другой картинкой........для этого (ниже код) в таблице были созданы слои для каждого персонажа и в каждом слое вставлена картинка прозрачная (gif), которая и стала ссылкой на модальное окно.........в открывшемся окне должно появиться определённое изображение.........так вот во всех браузнрах нормально (окно открывается с изображением), а в IE окно открывается, но картинки нет.......как же сделать для IE? Помогите разобраться.......Заранее спасибо.......Извиняюсь за извращённый код....
код в на странице:
<div align="center">
<table border="0" width="1325" id="table1" cellspacing="0" cellpadding="0" background="images/006%20к.jpg" height="1570">
<tr>
<td>
<div style="position: absolute; width: 187px; height: 203px; z-index: 5; left: 148px; top: 382px" id="layer5">
<a href="#openModalggr20"><img border="0" src="images/gif4.gif" width="185" height="204" style="text-decoration: none;"></a></div>
</td>
</tr>
</table>
</div>
<!-- Modal -->
<div id="openModalggr20" class="modalDialog">
<div>
<a href="#close" title="Закрыть" class="close"><img src="images/close.png"></a>
<div align="center">
<table border="0" width="293" cellspacing="0" cellpadding="0" height="361">
<tr>
<td width="293" height="361" rowspan="2">
<p align="center">
<img border="0" class="image" src="images/max19.jpg" align="center" width="" height=""></td>
</tr>
</table>
</div>
</div>
</div>
<!---->
код css:
.modalDialog {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.8);
z-index: 9999;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
display: none;
pointer-events: none;
}
.modalDialog:target {
display: block;
pointer-events: auto;
}
.modalDialog > div {
width: 420px;
position: relative;
margin: 5% auto;
padding: 10px;
border-radius: 10px;
background: #ffffff;
}
.close {
background-image: url(images/close.png);
position: absolute;
right: -12px;
text-align: center;
top: -12px;
text-decoration: none;
}
.close:hover { background: #00d9ff; }