Javascript-форум - Проблема с z-index..

Javascript-форум (https://javascript.ru/forum/)

- (X)HTML/CSS (https://javascript.ru/forum/xhtml-html-css/)

- - Проблема с z-index.. (https://javascript.ru/forum/xhtml-html-css/9062-problema-s-z-index.html)

Проблема с z-index..

Помогите, пожалуйста.

Для двух картинок фиксированного размера создал маску закругления углов. Пытаюсь наложить ее на картинки. Наложил, но ссылки на эти картинки работают только в мозилле и хроме.

Как сделать так, чтобы ссылки работали во всех браузерах?
Разумно ли так делать маску для изображений? Может есть более простые и надежные пути?

Вот код

Код:

  <div id="sq_banners">

          <a href=""></a><a href="" class="ban2"></a>

          <div id="sqban_mask"><img src="images/sqban_mask.png" alt="" /></div>

          <img src="images/sqban3.png" alt="" /><img src="images/sqban4.png" alt="" />

  </div>

Вот стили

Код:

        #sq_banners {

  float:left;

  height:125px; 

  margin-right:30px; 

  overflow:hidden; 

  position:relative; 

  width:250px; 

        }

        #sq_banners a {

  display:block;

  float:left;

  height:125px;

  position:absolute;

  width:125px;

  z-index:3;

        }

        #sq_banners .ban2 {left:125px;}

        #sqban_mask {position:absolute;z-index:2;}

Вот как это выглядит: http://tri4.ax3.net/akado_ural/maska.html

Не нужен здесь никакой z-index.

<style type="text/css">
img {
	border: 0;
	margin: 0;
}
.banners {
	overflow: hidden;
}
.banner:link, .banner:visited, .mask {
	display: block;
	width: 125px;
	height: 125px;
}
.banner:link, .banner:visited {
	position: relative;
	float: left;
	text-decoration: none;
}
.mask {
	position: absolute;
	top: 0;
	left: 0;
	background: url(http://tri4.ax3.net/akado_ural/images/sqban_mask.png) no-repeat;
}
.b2 .mask {
	background-position: 100% 0;
}
</style>
<div class="banners">
	<a class="banner b1" href="#b1">
		<img src="http://tri4.ax3.net/akado_ural/images/sqban3.png" alt="" width="125" height="125" />
		<span class="mask">&nbsp;</span>
	</a>
	<a class="banner b2" href="#b2">
		<img src="http://tri4.ax3.net/akado_ural/images/sqban4.png" alt="" width="125" height="125" />
		<span class="mask">&nbsp;</span>
	</a>
</div>

В ИЕ "курсор " не выделяется ручкой

все бы хорошо, но вот
1. в ИЕ курсор не выделяется, как при наведении на ссылку
2. разместив на отдельной странице заметил забавный фокус в опере:
баннеры сначала располагаются по вертикали, потом по горизонтали выстраиваются ))
http://tri4.ax3.net/akado_ural/maska2.html

Цитата:

Сообщение от warobushek

в ИЕ курсор не выделяется, как при наведении на ссылку

cursor: pointer;

для вложенных элементов.