Hyperlinking an entire table cell gives odd result with IE 3

[DaveKb9]

I am using a table for some part of my layout because I need to use 'rounded corner' boxes of equal height and width for various parts of the page. Each of these cells contains a number of <DIV>s giving background, borders etc... for the box layout, with one <DIV> actually containing the text content.

Because each of these boxes needs to link to a further page I have included an <a> tag inside the <td> tag pair and this sems to work just fine in Firefox, Opera and Safari with the cursor dutifully turning into a pointing finger when in any part of the box and, when clicked, passing me to the target page. In IE6 & 7 though, the hyperlink element works just fine but the cursor does not change to hand until I click.

Any clues? This page, which is under development, is at

http://new.scs-solutions.co.uk

 

[Vragabond]

Using CSS, you could force the cursor to appear as a pointer over the whole table cell. That might be an easy way to solve this.

___________________________________________________________
[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[DaveKb9]

Thanks for idea - I think I tried something along these lines earlier in the week but have now tried again. Tried two types of syntax (still learning this stuff) as follows:

<td style="cursorointer" class="tablecells50">
<td cursor="pointer" class="tablecells50">

... I'm not sure which would be correct but in neither case did the cursor remain a hand once it had crossed the topmost boundary of the cell.

 

[vacunita]

You have the link tag surrounding the DIV which not only is semantically incorrect but also.

<td><a href="..."><div>...</div></a></td>

leads to problems like the ones you describe in IE.

DIVs are block level elements while <a href>s are not.
So this:

<td><div><a href="...">...</a></div></td>

Is the semantically correct way of doing it.







----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

 

[Olaf Doschke]

You can define an a tag to be a block element, indeed some properties like background-image, that are applicable to all html tags suggest you can use any tag as a block element, otherwise there would be no block to which a background image could be applied.

The html/CSS purist may not recommend this, but links and so the a tag does have the characteristics of block level elements in one way: It's like a property you would want to set to any group of html elements that should link to some url, so it's having the characteristics of an outer block element often.

Therefore I understand that most people tend to use a tags as block level elements. You can use a tags inline within li or td or whatever and still make them span the whole area of their parent block elements by using this kind of CSS:

#navcontainer div a {display:block;}

This principle is used for example with Taming lists style navigation:

http://css.maxdesign.com.au/listamatic/vertical10.htm

Bye, Olaf.

 

[DaveKb9]

I have modified code in line with Vacunita's suggestion but am still seeing same issue with no hand pointer. Difference this time is that it does not even fleetingly turn into a hand when crossing the top border as it did before. Despite this the links still work.

 

[Olaf Doschke]

Hi Dave,

you have brought the a tag one step further inside, you've got an outer div around it, but in fact what vacunita says is, that the a tag should be the innermost. You need to put the a tag even inside the inner paragraphs, if you take it serious to have no block elements inside the inline "a" element, but then you would not have the whole box as the link.

You want the div class="rc_box" to act as the link, then you're perhaps better off, if you make use of javascript onmouseover and onmouseclick like in your navigation bar.

Bye, Olaf.

 

[vacunita]

It happens when you have an inline element such as a link tag around a block element such as DIV. All DIV's are block elements. So your link tag should be inside them.

FF is not as picky with that so it works the link tag wherever it is. IE does not.

Again No divs inside the link tag if you want it to work in IE.

Once inside, you can set the link elements display to block and then give it a height and width of 100% to fill whatever its in. However given the multiple divs you have there, yes its likely it won't fill the entire square but it may just be enough to make it work.





----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

 

[traingamer]

And using tables solely for 'rounded corner' boxes of equal height and width... is absolutely uneccessary.

See CSS Rounded Corners 'Roundup' for many ways to achieve that result without tables.


Greg
People demand freedom of speech as a compensation for the freedom of thought which they seldom use. Kierkegaard