Image popup on hover works, but I want to keep row height the same

[StevenHu]

I am using this CSS to make an image pop up on hover, and it works:

#tooltip20106 
    { position: absolute; }
#tooltip20106 a span 
    { display: none; color: #FFFFFF; }
#tooltip20106 a:hover span 
    { display: block; z-index: 100; position: relative; width: 290px; background: #aaa url(../icons/20106.jpg); height: 240px; left: -310px; top: 10px; color: #FFFFFF; padding: 0; }
#tooltip20106 a 
    { text-decoration:none; }

However, I am using it within a table cell, and although it pops up off the table at left where I want it, the table cell height enlarges to match the height of the image set in CSS. HTML:

<td class="col_name"><div id="tooltip20106"><a href="#">20106<span>&nbsp;</span></a></div></td>

Question:
Is it possible to make this image popup up on hover AND keep the row height unchanged? (I’m not using Jquery.) The only other options I’ve seen involved placing the image in a absolute position relative to the page, which means if the page is scrolled down, the popup will appear outside the page range, which, of course is pointless.

[ronpat]

I can’t replicate the issue with the code you’ve provided. Can you post a link to a working page or post enough code to demonstrate the problem?

[PVgr]

Try changing the position of #tooltip20106 to relative and the position of span to absolute.

[StevenHu]

That seems to work, PVgr! Thank you.