How to encode anchor labels as a block element to contain other block elements

Question

I ran into the same problem described in this thread. I am wondering if there are other ways to achieve the same result and avoid this problem.

Firefox seems to have problems with anchor tags containing block elements, even if the CSS property of the anchor tag display is set to "block." The effect I'm trying to achieve is to have full access to the block, not the text in the block. It also allows you to apply the hover state to the entire block, and not to the link.

Can anyone suggest a technique

EDIT:

Here is what I intend to show:

<div class="entry "> <a class="link" href="/topics/34/steroids"> <h2>Some Text</h2> <div class="info"> <div class="tag-visualization"> <div style="width: 67%;" class="guage"></div> </div> <ul class="stats"> <li> <strong>0</strong><br>FOLLOWERS </li> <li> <strong>2</strong><br>ANSWERS </li> <li> <strong>2</strong><br>QUESTIONS </li> </ul> </div> </a> </div> 

This is what firefox does:

 <div class="entry "> <a class="link" href="/topics/45/diet"> </a><h2><a _moz-rs-heading="" class="link" href="/topi/45/diet">sometext</a></h2> <a class="link" href="/topics/45/diet"> </a><div class="info"> <a class="link" href="/topics/45/diet"> </a><div class="tag-visualization"> <a class="link" href="/topics/45/diet"> </a><div style="width: 67%;" class="guage"></div> <a class="link" href="/topics/45/diet"> </a></div> <a class="link" href="/topics/45/diet"> </a><ul class="stats"> <a class="link" href="/topics/45/diet"> </a><li> <a class="link" href="/topics/45/diet"> <strong>0</strong><br>FOLLOWERS </a></li> <a class="link" href="/topics/45/diet"> </a><li> <a class="link" href="/topics/45/diet"> <strong>2</strong><br>ANSWERS </a></li> <a class="link" href="/topics/45/diet"> </a><li> <a class="link" href="/topics/45/diet"> <strong>2</strong><br>QUESTIONS </a></li> <a class="link" href="/topics/45/diet"> </a></ul> <a class="link" href="/topics/45/diet"> </a></div> <a class="link" href="/topics/45/diet"> </a> </div> 

Answer 1

When I usually need a <div> inside <a> , instead of <span> I use <span> instead of display:block; . Doesn't break the layout in Firefox with the above error and behaves exactly the same as the <div> does.

Answer 2

In Bootstrap, they seem to add the position: relative rule to the anchor tags inside the .nav class. If you add this rule to the anchor tag, it should act as an interactive hyperlink.

I just tried it and it seems to work on all modern browsers! I have not tested this in any old browsers yet.

Answer 3

Just use the snap with the display set to lock. If you say that I think that you are saying, then I was in the same situation a while ago - I want to place the images in the block anchor without underlining under the image. This was resolved by applying float: left; to the img tag.

For example:

 <a href="events.htm" style="display: block"><img style="float: left" src="calendar.gif" />Events</a> 

If you put this in multiple li tags, you can get a very simple menu with interactive blocks.

If this is not what you want, please give an example of where you want the block element to be attached to the block - I do not understand where you would like it to be.

Richard