Why is this hyperlink taking the whole table cell and not just on the text ?

Question

Facts:

• I'm working under Visual Studio .NET 2008
• I'm using Cufon-yui.js as a font replacement tool.
• The link is inside of a Table (as it handle much more info)

The command I use is:

<asp:HyperLink ID="thisistheID" runat="server" NavigateUrl="#">
  <h3 style="width:250px;">Title of the Link</h3>
</asp:HyperLink>

In Firefox and IE, I'd like to mouse over the text and have the link there, solely. If I mouse over the whole cell (of the table) the link is available and appears there even tho I don't have letters there.

How can I have this link to work just where the letters are?

I hope I asked this question the appropiate way.

Answer 1

I think the problem is that you are making the h3 tag a link. Two ways to fix it if this is the case....

a. Style the asp:HyperLink and don't specify the width (no need for h3 tag unless you are doing some javascript stuff for it).

<asp:HyperLink ID="HyperLink1" runat="server" 
   Font-Bold="True" 
   Font-Size="Large"
   text="Title of the Link" 
   NavigateUrl="default.aspx" ></asp:HyperLink> 

b. Use plain old html mark up inside the h3 tag if you don't need to access the control server side:

<h3 style="font-size: larger">
   <a href="Default.aspx">Title of the Link</a> 
</h3> 

Answer 2

What happens if you turn it inside-out?

<h3 style="width:250px;">
    <asp:HyperLink ID="thisistheID" runat="server" NavigateUrl="#">
        Title of the Link
    </asp:HyperLink>
</h3>