byzantiner
Active Member
- Регистрация
- 11.08.2010
- Сообщения
- 29
Пожалуйста, помогите разобраться со всплывающими картинками.
Вопросы такие:
1. - В Safari и Chrome изображения-ссылки сдвигаются вниз и вправо (видимо из-за установок всплывающих картинок). Причём при перезагрузке страницы одни из них выравниваются, как и должны быть, а другие остаются сдвинутыми.
2. - Почему в IE всплывающие картинки появляются под картинками окружающих ссылок?
3. - И почему Mazilla, Safari & Chrome не выполняют top:15, а располагает всплывающую картинки так, как будто выставлено bottom: 15px?
www.art-factor.gmxhome.de
.thumbnail { position: relative; z-index: 0; }
.thumbnail:hover { background-color: transparent; z-index: 50; }
.thumbnail span { position: absolute; background-color: #00060C; padding: 10px; left: 0px;
border: 1px solid #5594CF; visibility: hidden; color: 222222; text-decoration: none; }
.thumbnail span img { border-width: 0; padding: 2px; }
.thumbnail:hover span { visibility: visible; top: 15; left: 15px; }
<td width="34%">
<a class="thumbnail" href="XB-Bluemenbogen-RU.html">
<img class="a" src="http://i.flamber.ru/files/st1/1190648075/1264875274_e.jpg" alt="L'arc de fleur">
<span><img src="http://i.flamber.ru/files/st1/1190648075/1264875274_f.jpg" alt="L'arc de fleur"></span>
<br>L'arc de fleur</a>
</td>
Заранее благодарен за ваши ответы.
Вопросы такие:
1. - В Safari и Chrome изображения-ссылки сдвигаются вниз и вправо (видимо из-за установок всплывающих картинок). Причём при перезагрузке страницы одни из них выравниваются, как и должны быть, а другие остаются сдвинутыми.
2. - Почему в IE всплывающие картинки появляются под картинками окружающих ссылок?
3. - И почему Mazilla, Safari & Chrome не выполняют top:15, а располагает всплывающую картинки так, как будто выставлено bottom: 15px?
www.art-factor.gmxhome.de
.thumbnail { position: relative; z-index: 0; }
.thumbnail:hover { background-color: transparent; z-index: 50; }
.thumbnail span { position: absolute; background-color: #00060C; padding: 10px; left: 0px;
border: 1px solid #5594CF; visibility: hidden; color: 222222; text-decoration: none; }
.thumbnail span img { border-width: 0; padding: 2px; }
.thumbnail:hover span { visibility: visible; top: 15; left: 15px; }
<td width="34%">
<a class="thumbnail" href="XB-Bluemenbogen-RU.html">
<img class="a" src="http://i.flamber.ru/files/st1/1190648075/1264875274_e.jpg" alt="L'arc de fleur">
<span><img src="http://i.flamber.ru/files/st1/1190648075/1264875274_f.jpg" alt="L'arc de fleur"></span>
<br>L'arc de fleur</a>
</td>
Заранее благодарен за ваши ответы.
