css样式弹出层在不同浏览器下显示位置不同

[qiqishardgel]

我做了一个css弹出层显示大图和详细信息，在ie6，搜狗浏览器下显示是正常的：

但是在其它浏览器就变成下面这样：


代码如下：
<style type="text/css">
/*Tooltips*/
.tooltips{ position:relative; /*这个是关键*/ z-index:2; }
.tooltips:hover{ z-index:3; background:none; /*没有这个在IE中不可用*/ }
.tooltips span{ display: none; }
.tooltips:hover span{
/*span 标签仅在 :hover 状态时显示*/
display:block;
position:absolute;
top:2px;
left:1px;
width:220px;
border:1px solid black;
background-color:#FFFFFF;
padding: 3px;
color:black;
}
</style>

<asp:DataList ID="DataList1" runat="server" RepeatColumns="9" RepeatDirection="Horizontal" CellSpacing="9">
<ItemTemplate>
<a class="tooltips" href="#tooltips">
<img src="images/<%#Eval("product_img") %>" width="100px" height="100px" style="border: 0" alt="" />
<span>
<table>
<tr>
<td>
<img src="images/<%#Eval("product_img") %>" style="border: 0" width="212px" height="212px" alt="" />
</td>
</tr>
<tr>
<td>
<a href="aaa.aspx?productid=<%# Eval("Product_id") %>&&str=首页" target="_blank" style="text-decoration: none; font-size: 13px; color: #0063DC;">
<%#Eval("product_name") %>
</a>
</td>
</tr>
<tr>
<td>
<a href="javascript:void(0)" style="text-decoration: none; font-size: 14px; color: #FF6600; font-weight: bold">￥<%#Eval("product_price") %></a>
</td>
</tr>
</table>
</span></a>
</ItemTemplate>
</asp:DataList>
要怎么改才能让弹出的层在任何浏览器下都和第一张图片一样显示？

[KK3K2005]

一般这样的问题 我会给2个浏览器不同的样式达到一样的效果 然后问题原因就找到了

[qiqishardgel]

这个问题自己解决了，再问一个

这个总共有三行，第一行弹出的层位置是正好的，现在我鼠标滑过第二行的图片时，是下面这个效果

能不能改成 就是不管是鼠标滑过第二行或是第三行的图片，弹出的层的位置就像是第一张图片的位置一样，就是把下面这个图片弹出的这个层往上提，提到第一张图片那个位置，这个能改吗？
就是类似http://www.lao88.cn/这个网站那三行产品展示的效果