invisble, very very very mystical question!!

[EmperiO]

Hey all,
I was joking about that mystical, but i got just a question.
Is it possible to make a invisble link which overlays in one table cell all the things like images and text, so you click always on a link if you click on a table cell.
The link must size one table cell, I've made a code which looks a bit like it, but it does not overlays text and images.
Here is mine:
<a style='line-height:1em;width:100%;height:100%;display:block;' href="link"></a>

[Desdinova]

can't really be done with css I believe. It's a common thing, wanting to stretch out till hitting something else. 100% height means 100% window height, so that will screw things up. The line-height is not required at all when setting height. Do add overflow: hidden; to fix IE6. display block seems ok, width: 100% is default, so it can be removed.

What you need to overlap things, is position: absolute;. However things won't behave the way you want.

Solution? Create an anchor within the cell so people can click that (if they don't have javascript), give it an ID, and remove it from the DOM with javascript placed right after the anchor. Use an onclick attribute on the table cell, and style it with cursor: pointer; to get a hand-icon when hovering over it.
javascript users will use the onclick, non-js users will use the anchor.

[bpat1434]

I guess technically you could create a div that has an opacity of 0% (making it invisible) with a display of block that is absolutely positioned in the cell you want with a z-index of 99 which brings it to the top of all other items. Give it the proper width & height to fill the cell. Inside that div just create a block displayed link with width & height of 100%.

That should be about all you need to "cover" stuff up with an invisible link. Here's a small example:

<style type="text/css"><!--
td { position:relative; }

.invisiLink {
	display:block;
	filter:Alpha(opacity=0);
	height:100%;
	left:0;
	margin:0;
	opacity:0.0;
	padding:0;
	position:absolute;
	top:0;
	width:100%;
	z-index:99;
	-moz-opacity:0.0;
}

.invisiLink a, .invisiLink a:link, .invisiLink a:visited {
	display:block;
	height:100%;
	text-decoration:none;
	width:100%;
}
--></style>

<table>
	<tr>
		<td>Some text</td>
		<td>Some text</td>
		<td>Some text</td>
	</tr>
	<tr>
		<td>Some text</td>
		<td><a href="http://www.phpbuilder.com">PHPBuilder</a><div class="invisiLink"><a href="http://phpbuilder.bpatterson.net">PHPBuilder</a></div></td>
		<td>Some text</td>
	</tr>
	<tr>
		<td>Some text</td>
		<td>Some text</td>
		<td>Some text</td>
	</tr>
</table>

Now, in IE you have to specify essentially the same exact contents of what you're trying to "hide". Firefox and other browsers can handle css properly 😉 The above example shows that instead of being taken to this site (phpbuilder.com) instead you'll be taken elsewhere.

Note that this works in IE, and firefox is a little messed up, but thats where you can come in to tweak the code and position it where you want.

Hope it helps 😉

[NogDog]

If you don't mind depending on JavaScript, you could just add an onclick event to the table cell:

<td onclick="window.location='http://www.phpbuilder.com/'">
<!-- table cell contents here -->
</td>