Здраствуйте! Создаю кнопку которая меняет цвет когда мышка над ней таким образом: в <div> пишу текст который прикрываю прозрачной пнг-шкой, чтобы мышь над ним не дергалась и не пыталась выделять текст. Естественно ссылкой выступает пнг-шка. Заметил что именно в firefox (в opera и ие все нормально) под кнопкой на определенном расстоянии(возможно там где должна располагатся надпись без корректировки) появляется еще одна область наведя мышку на которую указатель показывает что нашел ссылку, и естественно цвет кнопки которая находится выше меняется. Хотелось бы чтобы кнопка работала корректно.
Вот мой код на данном этапе:

<td width="29%" align="center"><div id="but1" onmouseover="fade(this.id,'rule2')" onmouseout="fade.back(this.id,'rule2')" align="center"><p id="butext">Главная</p><a href="#"><img src="img/button.png" width="195px" height="46px" alt="" border="0" style="z-index:3;position:relative;bottom:35px;"></a></div>
</td>

и стили:

#but1 {
width:195px;
height: 46px;
background:#bb0101;
position:relative;
top:135px;
z-index:1
}
#butext {
position:relative;
top:10px;
color:white;
font-family: arial, sans-serif;
font-size: 16px;
z-index:2;
}

Подскажите возможно ли это побороть, ведь ff любимый браузер ...

P.S. Раз я уже написал то позвольте спросить как вы боретесь с разным позиционированием в разных браузерах? Ту же картинку.пнг относительно блока див опера показывает на пиксель выше, а ИЕ 7 на 2 пикселя ниже...
Проверку на валидность код проходил, ошибок не найдено.
Спасибо.