Проблема с выравниванием всплывающих блоков в FF и Chrome!?

[GansICH]

Добрый день, друзья! Буду рад любой помощи! Возникли проблемы со всплывающими блоками в Firefox и Chrome ... в Opera и IE вроде нормально, а именно: они почему-то скачут ((

вот css:

<style type="text/css">
<!--

td.compact.border-bottom {
	position:relative;
    z-index:0;
	width:182px !important;
	height:280px !important;
}
td.compact.border-bottom span{ display: none; }
td.compact.border-bottom:hover{ z-index:25; background:;}
td.compact.border-bottom:hover span.tooltip{
    display:block;
    position: absolute;
    top:0px; left:-5px;
	padding: 15px 0 0 0;
	width:182px;
    text-align: center;
}

html:not([lang*=""]):not(:only-child) td.compact.border-bottom {
	position: fixed;
	}

html:not([lang*=""]):not(:only-child) td.compact.border-bottom:hover span.tooltip{
    position: inherit;
    top:0px; left:-5px;
	z-index:5000;
}

td.compact.border-bottom:hover span.top{
	display: block;
	padding: 30px 8px 0;
    background: url(images/popup.gif) no-repeat top;
}
td.compact.border-bottom:hover span.middle{ /* different middle bg for stretch */
	display: block;
	padding: 0 8px; 
	background: url(images/popup_b.gif) repeat bottom; 
}
td.compact.border-bottom:hover span.bottom{
	display: block;
	padding:3px 8px 20px;
    background: url(images/popup.gif) no-repeat bottom;
}
a.zoom {
background:url(images/zoom_off.gif);
background-position: 0% 0%;
background-repeat: no-repeat;
background-size: auto;
height: 19px;
position: absolute;
right: 5px;
text-decoration: none;
top: 20px;
width: 22px;
}

td.compact.border-bottom:hover span.middle a.zoom:hover {
	background:url(images/zoom_on.gif);
	background-position: 0% 0%;
    background-repeat: no-repeat;
    background-size: auto;
	height: 19px;
    position: absolute;
    right: 5px;
    text-decoration: none;
    top: 20px;
    width: 22px;}
-->
</style>

Вот сам html:

<table width="555" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td class="center image-border compact border-bottom"><span class="tooltip"><span class="top"></span><span class="middle"><a class="zoom" href="http://ya.ru"> </a>This is my Bubble Tooltip with CSS This is my Bubble Tooltip with CSS This is my Bubble Tooltip with CSS This is my Bubble Tooltip with <a href="http://1ps.ru">CSS This is my Bubble Tooltip</a> with CSS This is my Bubble Tooltip with CSS This is my Bubble Tooltip with CSS This is my</span><span class="bottom"></span></span><img src="images/proba.gif" width="183" height="234" /></td>
    <td class="center image-border compact border-bottom"><img src="images/proba.gif" width="183" height="234" /><span class="tooltip"><span class="top"></span><span class="middle"><a class="zoom" href="http://ya.ru"> </a>This is my Bubble Tooltip with CSS This is my Bubble Tooltip with CSS This is my Bubble Tooltip with CSS This is my Bubble Tooltip with <a href="http://1ps.ru">CSS This is my Bubble Tooltip</a> with CSS This is my Bubble Tooltip with CSS This is my Bubble Tooltip with CSS This is my</span><span class="bottom"></span></span></td>
    <td class="center image-border compact border-bottom"><img src="images/proba.gif" width="183" height="234" /><span class="tooltip"><span class="top"></span><span class="middle"><a class="zoom" href="http://ya.ru"> </a>This is my Bubble Tooltip with CSS This is my Bubble Tooltip with CSS This is my Bubble Tooltip with CSS This is my Bubble Tooltip with <a href="http://1ps.ru">CSS This is my Bubble Tooltip</a> with CSS This is my Bubble Tooltip with CSS This is my Bubble Tooltip with CSS This is my</span><span class="bottom"></span></span></td>
  </tr>
</table>

Ссылки на картинки необходимые чтоб все показывало корректно ниже(их положить в папку images):

В чем может быть проблема и как решить?