Ролловер. Работает в FF, Chrome, Safari. В IE8 - нет :)

[Afrika]

Сделал ролловер :

<div id="Tools">

<ul>

<li><a href="#"><span>aаааа</span></a></li>

<li><a href="#"><span>bbbbb</span></a></li>

<li><a href="#"><span>ccccc</span></a></li>

<li><a href="#"><span>ddddd</span></a></li>

</ul>

</div>

Стили:

#Tools

{

width:180px;

height:400px;

background-color:white;

float:left;

padding:20px 0 0 20px;

}

#Tools ul

{

list-style-type:none;

}

#Tools a, a:visited

{

width:157px;

height:31px;

background:url(Images/Tools.jpg) 0 -3px;

display:block;

text-align:center;

text-decoration:none;

outline-style:none;

}

#Tools a:hover

{

width:157px;

height:31px;

background:url(Images/Tools.jpg) 0 -40px;

display:block;

}

#Tools a:active

{

width:157px;

height:31px;

background:url(Images/Tools.jpg) 0 -77px;

display:block;

}

#Tools span

{

line-height: 30px;

font-size: 14px;

color:#c9c9c9;

}

#Tools a:hover span

{

color:White;

}

#Tools a:active span

{

line-height: 32px;

color:#c0c0c0;

}

В FF, Chrome, Safari работает. В IE8 и Opera когда щелкаешь и курсор на span, стиль Tools a:active не работет. Только если нажимать в стороне от спан, т.е. на картинке background - срабатывает.

Может кто может помочь найти решение

Спасибо.

[swetlana]

а зачем здесь вообще этот спан?

[Afrika]

а зачем здесь вообще этот спан?

Без него не могу нормально разместить (выровнять) текст. Если его не использовать, придется для каждой кнопки свою картинку рисовать. А так - одна на всех Все меню весит 2К.

[swetlana]

тогда показывайте ссылку на страницу.

[Afrika]

тогда показывайте ссылку на страницу.

У меня пока нет страницы. Можно Вам на Email прислать?