Помогите с выравнивание всплывающих блоков

Добрый день, друзья! Буду рад любой помощи! Возникли проблемы со всплывающими блоками в Firefox и Chrome в Opera и IE вроде нормально, а именно: они почему-то скачут ((
вот 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;}

Вот сам 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)

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