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
-1
points
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 about 6 years ago by Am
Cyrena 10
0
points

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 {
  width:100%;
  height:100%;
  display:block;
}
</style>
------------
<div class="clickable">
   <a href="http://www.google.com">Stuff Here</a>
</div>
Answered about 6 years ago by Cyrena
0
points

HTML5 will allow this AIUI. http://davidwalsh.name/html5-elements-links

or if you're using jQuery, there's a very nice plug-in that does the trick: http://www.trovster.com/lab/plugins/fitted/

Answered about 6 years ago by Tony Crockford