Alternative to nested anchor tags

Question

I\'m trying to build a table where each cell\'s content is wrapped with an A tag set to full height and width, so that the entire cell is clickable.

But

Answer 1

You could use CSS or JavaScript. I would recommend just using CSS.

CSS

This works in my Firefox using CSS only. Basically I just made all child links (except the big one) have position: relative and set their z-index to higher than the large background link.

HTML

    Hello, Bob
    

CSS

div {
    position: relative;
}

.big {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;   
  z-index: 0;
}

.normal {
  position: relative;
  z-index: 1;  
}

JavaScript

Attach a click event to the cell, and an event to all child links. Make sure child links events do not bubble up (stopPropagation()).