big HELLO to everyone

[darren.read]

Hi there

Im a graphic/web designer but trying to get into the code side which brought me to this forum after working through sitepoints book 'Build your own site the right way' - great book by the way if like me you have only used tables in the past.

anyway im building my first site using css and have a technical question...

i have used a table to display upcoming gigs and venues, is it possible to make the enitre row a link with hover state etc?

heres a link to show the site as it is, at the minute just the th(date is a link)

http://www.readd.karoo.net/circusenvy/

[AutisticCuckoo]

Welcome to SitePoint!

is it possible to make the enitre row a link with hover state etc?

You can achieve a visual 'hover' state using CSS only, although it won't work in Internet Explorer 6 or older.

tr:hover td {
  background-color:#ff0;
  color:#000;
}

To make the whole row a 'link', you must use JavaScript. You can do something similar by enclosing the content of each cell in a link (provided it's inline elements only), and then use CSS to highlight the whole row on hover (in modern browsers).

[darren.read]

thanks for that tommy, i have gone with your suggestion and it works great apart form ie6.

i have used a hover style underline on the 'a' element on the date (th) and venue (td) in ie, shame you cant get them both to underline together as in firefox etc using the tr:hover.

http://www.readd.karoo.net/circusenvy/

[Jamieharrop]

As Tommy said, the only way you can do exactly what you want is by using Javascript.

<tr onclick="window.location='somepage.html'" onmouseover="this.style.cursor='hand'"><td>Content Here</td></tr>

To get this to work properly in IE5.5, IE6, Fx, and Opera, you will need to add some CSS to define the cursor style for that <tr>

So, give the <tr> an id or class, by using this:

<tr id="cursor_id" onclick="window.location='somepage.html'" onmouseover="this.style.cursor='hand'"><td>Content Here</td></tr>

Then in your CSS add this:

#cursor_id {
cursor: pointer;
}