Table as Link Faux Rollover IE vs FF

ribbens · Jan 21, 2007

I am setting a table as a link. I have 2 solutions, one for FF, one for IE, but I am too newbie to resolve the two.
So here is the pertinent CSS I'm using for both solutions:

Code:

table {
	display: inline;
}

.thumbs {
	color: #fff;
text-decoration: none;
}

a.thumbs:hover {
	color: #9f9b75;
	text-decoration: none;
	text-size: .5em;
}

And here is the FF solution XHTML:

Code:

	<a href="my_html1.html" class="thumbs"> 
		<table>
			<tr>
			<td><img src="thumb1.jpg" alt="thumb1" /></td>
			</tr>

			<tr>
			<td>Thumb1</td>
			</tr>
		</table>
	</a>
		</col>
	<a href="my_html2.html" class="thumbs">
		<table>
			<tr>
			<td><img src="thumb2.jpg" alt="thumb2" /></td>
			</tr>
			<tr>
			<td>Thumb2</td>
			</tr>
		</table>
	</a>

And here is the IE solution XHTML:

Code:

	<a href="my_html1.html" class="thumbs"> 
		<table>
			<tr>
			<td><a href="my_html1.html" class="thumbs"><img src="thumb1.jpg" alt="thumb1" /></a></td>
			</tr>

			<tr>
			<td>Thumb1</td>
			</tr>
		</table>
	</a>
		</col>
	<a href="my_html2.html" class="thumbs">
		<table>
			<tr>
			<td><a href="my_html2.html" class="thumbs"><img src="thumb2.jpg" alt="thumb2" /></a></td>
			</tr>
			<tr>
			<td>Thumb2</td>
			</tr>
		</table>
	</a>

The resulting effect I'm looking for is to have two thumb links, side by side, which when hovered over, a caption appears below.

I am aware that there is code out there that can detect browsers, so that might work if someone could point me in that direction.

Oh, and if you ask: "Fool newbie, why are you using tables for layout? That's a no no," please give a better suggestion on how I can create the effect I desire. And my answer is: I couldn't figure out how to with just CSS

.

PS: I don't know Javascript, though Java solutions welcome.

Vragabond · Jan 21, 2007

You cannot put a table inside an anchor (<a>) tag, so your solution will never work. And yes, whatever you're trying to do, should not be attempted to be done with tables. And you do not need Javascript, which is an entirely different thing to Java. So, what to do.

Read up on CSS, specifically on floats and do the following:

Code:

<a>
  <img floated to the left />
  text
</a>

You will probably have to deal with some clearing as well, to make sure floating the image won't cause you too much trouble.

ChrisHunt · Jan 22, 2007

I am setting a table as a link...

OMG, what on earth for?

The resulting effect I'm looking for is to have two thumb links, side by side, which when hovered over, a caption appears below.

Oh, I see. Well, there are better ways of doing that:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html>
<head>
  <title>Test List</title>
  <style type="text/css">

    ul.thumbs {
      list-style: none;
      margin: 0;
      padding: 0;
    }

    .thumbs li {
      float: left;
      margin: 5px;
      padding: 0;
      text-align: center;
      color: #000;
      background: #CCC;
      border: 1px solid black;
    }

    .thumbs li a {
      display: block;
      text-decoration: none;
      color: #ccc;
      /* or visibility: hidden; */
    }

    .thumbs a img {
      border: 0;
      margin: 5px auto;
      /* visibility: visible; */
    }

    .thumbs a:focus,
    .thumbs a:active,
    .thumbs a:hover {
      color: #000;
      /* or visibility: visible; */
    }

  </style>
</head>
<body>
  <ul class="thumbs">
    <li><a href="#"><img src="blue.gif" /><br>Blue</a></li>
    <li><a href="#"><img src="red.gif" /><br>Red</a></li>
  </ul>
</body>
</html>

I've put it in a <ul> cos I think it's a nice way of giving things some structure. If you have a solid background colour you can use the above method for hiding the text. If you don't, you'll have to use the commented-out "visibility" code instead - but be warned, it doesn't work quite so slickly cross-browser.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Table as Link Faux Rollover IE vs FF

ribbens

Technical User

Vragabond

Programmer

ChrisHunt

Programmer

Similar threads

Part and Inventory Search

Sponsor