Rollover on link versus cell

kargrafx

10-06-2004, 09:29 PM

I have a menu I am making set up as follows:

a:link {
color: #f39;
background-color: #fff;
text-decoration:none;
display: block;
}
a:visited {
color: #f6c;
background-color: #fff;
text-decoration:none;
display: block;
}
a:link:hover {
color: #fcf;
background-color: #f39;
text-decoration:none;
display: block;
}
table.menu {
font-family: "Times New Roman", Times, serif;
font-size: 9pt;
line-height: 11pt;
color: #FF3399;
}

For the style, and;

<table width="120" border="0" align="center" cellpadding="1" cellspacing="0" class="menu">
<tr><a href="biography.html"><td><div align="center">Biography</div></td></a></tr>
<tr><td><div align="center"><a href="gallery.html" width="120">Image Gallery</a></div></td></tr>
<tr><td><div align="center"><a href="services.html">Rates & Services</a></div></td></tr>
<tr><td><div align="center"><a href="faq.html">F. A. Q.</a></div></td></tr>
<tr><td><div align="center"><a href="gbook.html">Guestbook</a></div></td></tr>
<tr><td><div align="center"><a href="calendar.html">Online Calendar</a></div></td></tr>
<tr><td><div align="center"><a href="contact.html">Contact Information</a></div></td></tr>
</table>

For the menu itself.

Notice the first item, Biography, has the TD nested inside the <a> tag instead of just the text. I was doing this because I want the entire cell's area to be clickable, which does not work with the text only wrapped in the <a> tag. However, by doing that, there is no effect at all on hover - the link works, and the entire cell is clickable, but no change on hover.

So, what am I doing wrong with that? And is there a way to eliminate the table, but have an area of 120 pixels wide by the text height to be clickable, even if only one or two characters are in that space?

I had tried that with the code you see on the second line, Gallery, making the <a> tag have a width of 120; but that did not work either.

Thanks!

hemebond

10-07-2004, 01:13 AM

*sigh*<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>45683</title>
<style type="text/css">
#menu {
width:120px;
padding:0;
margin:0 auto;
list-style:none;
}
#menu a {
display:block;
text-align:center;
}
#menu a:hover {
background-color:#f00;
}
</style>
</head>
<body>
<ul id="menu">
<li><a href="biography.html">Biography</a></li>
<li><a href="gallery.html">Image Gallery</a></li>
<li><a href="services.html">Rates & Services</a></li>
<li><a href="faq.html">F. A. Q.</a></li>
<li><a href="gbook.html">Guestbook</a></li>
<li><a href="calendar.html">Online Calendar</a></li>
<li><a href="contact.html">Contact Information</a></li>
</ul>
</body>
</html>

gohankid77

10-07-2004, 02:28 AM

Hey! At least try to keep his original code!

I do agree with hemebond though. You should really use lists for menus, rather than tables.

/* Add the following CSS */
a:link, a:visited, a:link:hover {
display: table-cell;
}
/* Stop adding! */
--------
<table width="120" border="0" align="center" cellpadding="1" cellspacing="0" class="menu">
<tr>
<td align="center"><a href="biography.html">Biography</a></td>
</tr>
<tr>
<td align="center"><a href="gallery.html" width="120">Image Gallery</a></td>
</tr>
<tr>
<td align="center"><a href="services.html">Rates & Services</a></td>
</tr>
<tr>
<td align="center"><a href="faq.html">F. A. Q.</a></td>
</tr>
<tr>
<td align="center"><a href="gbook.html">Guestbook</a></td>
</tr>
<tr>
<td align="center"><a href="calendar.html">Online Calendar</a></td>
</tr>
<tr>
<td align="center"><a href="contact.html">Contact Information</a></td>
</tr>
</table>

That should work for you.

hemebond

10-07-2004, 06:09 AM

Hey! At least try to keep his original code!I absolutely refuse to encourage bad practices.

gohankid77

10-07-2004, 06:11 AM

Heh. Just as I refuse to code for IE. What a pair! *hiccup*