Am 0

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

3 answers

Am 0
This was chosen as the best answer

I realized the easiest way is to convert all block elements inside my a tag to span element with display set to block. All of a sudden Bob became my uncle.

Answered almost 7 years ago by Am
Cyrena 10

If you're working with something like a Div, you can put the A tag within the div and set the A tag to be display:block and width and height to 100%. The A tag will fill the div, and the result will be a fully clickable div.

<style type="text/css">
div.clickable a {
<div class="clickable">
   <a href="">Stuff Here</a>
Answered almost 7 years ago by Cyrena

HTML5 will allow this AIUI.

or if you're using jQuery, there's a very nice plug-in that does the trick:

Answered almost 7 years ago by Tony Crockford