How to code anchor tags as block element to contain other block elements

Question

I am experiencing the same problem described in this thread. I'm wondering if there are other ways to achieve the same result and avoid this issue.

Apparently Firefox has issues with anchor tags containing block elements even when the display CSS property of the anchor tag is set to "block". The effect that I am trying to achieve is to have a the complete block click-able instead of the the text in the block. It also allows to apply the hover state to the whole block instead of the link part.

Can anyone suggest a technique

EDIT:

This 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 renders:

<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

Just use an anchor with display set to block. If you are saying what I think you are saying then I was in the same situation a while back - wanting to place images within a block anchor, without the underline 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 place this inside several li tags then you can get a very simple menu with clickable blocks.

If this is not what you want then please give an example of where you would want a block element in a block anchor - I dont understand where you would want such a thing.

Richard

Answer 2

When I would normally need a <div> inside an <a>, I use a <span> instead with display:block;. Doesn't break the layout in Firefox with the aforementioned bug and behaves exactly as a <div> does.