position:relative

eliminating overflow trail

[sssweb]

I have a table with a text link in one cell. On hover, I want a box outline to appear around the text block, rather than the typical underline and/or color change. In other words, I want it to act like an image link rather than a text link.

(Before we go further, note that I can't make an image of the text because it is a php variable.)

My solution (and I'm open to better ones) is to print the text in one table cell, then put a correct-size spacer.gif (i.e. transparent image) in the next cell, with the following CSS:

style="position:relative;left:-100%"

The positioning works perfectly, but the table cell holding the text displays at double width (i.e. as though the cover image is adjacent to the text block, not on top of it), despite the "overflow:hidden" on the containing block. Here is my code:

<table cellpadding="0" cellspacing="0" border="1" style="overflow:hidden">
<tr>
<td>
DYNAMIC TEXT BLOCK
</td>
<td style="position:relative;left:-50%"> <!-- don't know why it's 50% - not 100% - but it works -->
<a href="/link.htm"><img src="spacer.gif"></a>
</td>
</tr>
</table>

I've tried many variations, including DIV's, nested tables, etc. -- all give the same result.

[sssweb]

I think I got it -- needed to set widths for various elements.

[Setek]

Forgive me if I'm wrong to say so sssweb, but it seems like your code is surprisingly messy and inefficient for something so simple?

Why not something along the lines of this?

<a href="#" style="display: block; width: 100px; height: 100px; background: #aaa; border: 1px solid #f00;" title="test">test</a>

Block style links, no messy positioning, possible IE hasLayout problem (if so, force a width for IE only and problem solved)

Just my opinion :)