title: How to code anchor tags as block element to contain other block elements
body: <p>I am experiencing the same problem described in this <a href="https://stackoverflow.com/questions/2191029/firefox-rendering-gone-wrong-see-something-really-weird">thread</a>. I'm wondering if there are other ways to achieve the same result and avoid this issue.</p>
  
  <p>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.</p>
  
  <p>Can anyone suggest a technique</p>
  
  <p>EDIT:</p>
  
  <p>This is what I intend to show:</p>
  
  <pre><code>&lt;div class="entry "&gt;
      &lt;a class="link" href="/topics/34/steroids"&gt;
          &lt;h2&gt;Some Text&lt;/h2&gt;
          &lt;div class="info"&gt;
               &lt;div class="tag-visualization"&gt;
                    &lt;div style="width: 67%;" class="guage"&gt;&lt;/div&gt;
               &lt;/div&gt;
               &lt;ul class="stats"&gt;
                    &lt;li&gt;
                         &lt;strong&gt;0&lt;/strong&gt;&lt;br&gt;FOLLOWERS
                    &lt;/li&gt;
                    &lt;li&gt;
                         &lt;strong&gt;2&lt;/strong&gt;&lt;br&gt;ANSWERS
                    &lt;/li&gt;
                    &lt;li&gt;
                         &lt;strong&gt;2&lt;/strong&gt;&lt;br&gt;QUESTIONS
                    &lt;/li&gt;
               &lt;/ul&gt;
           &lt;/div&gt;
       &lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This is what firefox renders:</p>
  
  <pre><code>&lt;div class="entry "&gt;
       &lt;a class="link" href="/topics/45/diet"&gt;
       &lt;/a&gt;&lt;h2&gt;&lt;a _moz-rs-heading="" class="link" href="/topi/45/diet"&gt;sometext&lt;/a&gt;&lt;/h2&gt;
       &lt;a class="link" href="/topics/45/diet"&gt;                        &lt;/a&gt;&lt;div class="info"&gt;
  &lt;a class="link" href="/topics/45/diet"&gt;                
                              &lt;/a&gt;&lt;div class="tag-visualization"&gt;
  &lt;a class="link" href="/topics/45/diet"&gt;                                &lt;/a&gt;&lt;div style="width: 67%;" class="guage"&gt;&lt;/div&gt;
  &lt;a class="link" href="/topics/45/diet"&gt;                            &lt;/a&gt;&lt;/div&gt;
  &lt;a class="link" href="/topics/45/diet"&gt;                            &lt;/a&gt;&lt;ul class="stats"&gt;
  &lt;a class="link" href="/topics/45/diet"&gt;                                &lt;/a&gt;&lt;li&gt;
  &lt;a class="link" href="/topics/45/diet"&gt;                                    &lt;strong&gt;0&lt;/strong&gt;&lt;br&gt;FOLLOWERS
                                  &lt;/a&gt;&lt;/li&gt;
  &lt;a class="link" href="/topics/45/diet"&gt;                                &lt;/a&gt;&lt;li&gt;
  &lt;a class="link" href="/topics/45/diet"&gt;                                    &lt;strong&gt;2&lt;/strong&gt;&lt;br&gt;ANSWERS
                                  &lt;/a&gt;&lt;/li&gt;
  &lt;a class="link" href="/topics/45/diet"&gt;                                &lt;/a&gt;&lt;li&gt;
  &lt;a class="link" href="/topics/45/diet"&gt;                                    &lt;strong&gt;2&lt;/strong&gt;&lt;br&gt;QUESTIONS
                                  &lt;/a&gt;&lt;/li&gt;
  &lt;a class="link" href="/topics/45/diet"&gt;                            &lt;/a&gt;&lt;/ul&gt;
  &lt;a class="link" href="/topics/45/diet"&gt;                        &lt;/a&gt;&lt;/div&gt;
  &lt;a class="link" href="/topics/45/diet"&gt;                    &lt;/a&gt;
                  &lt;/div&gt;
  </code></pre>