Forum Moderators: mack
I have an html question. I am building a button that is consisted of two table rows:
The top row is an image of a fixed width that looks like a horizontal bar. The bottom is a textual word. The reason I didn't generate a gif for the entire image is because I really have a lot of gifs to maintain.
Now I need to click anywhere in the table and make the browser go to the linked page. I originally thought the following is possible:
<a href="abc.html"><table>
<tr><td><img .../></td></tr>
<tr><td>ABC</td></tr>
</table></a>
This is working in firefox. (Clicking anywhere in the table will lead the browser to abc.html) However, it doesn't work in internet explorer as it doesn't support link spanning accross a table.
So here is the alternative:
<table>
<tr><td><a href="abc.html"><img .../></a></td></tr>
<tr><td><a href="abc.html">ABC</a></td></tr>
</table>
It kind of works, but the issue is that there are some white margin on the left and right of the text "ABC". Text "ABC" is not as wide as the image. Clicking on the margin on the left and right of "ABC" will lead the browser to nowhere.
Can someone suggests me what to do here?
I hope clicking anywhere in the second row will work, not just exactly on the text "ABC". Further, I don't want to generate a gif for the entire button either.
Thanks!
ALSO, it's been my experience that users won't click on white space expecting a link. they will click on an image or text, but won't assume that void space is a link.
Why do you feel compelled to make the white space clickable?
<table onclick="location.href='abc.html';">should do it. If not, try applying it to the individual TRs.
