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

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

    { 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>

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.

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?

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

That seems to work, PVgr! Thank you.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.