Previously, I heard that Firefox had a significant issue with links wrapping around block elements. Recently, this problem has caused some challenges for me as well.
About 20% of the time, for unknown reasons, when I modify this code (keep in mind that all elements are defined as block elements in my stylesheet):
<li>
<a href="product.htm">
<img src="product-image.jpg" width="100" height="100" alt="Product image" />
<h2>Product title</h2>
<p>Product description</p>
</a>
</li>
To look like this:
<li>
<a href="product.htm">
<img width="100" height="100" alt="Product image" src="product-image.jpg">
</a>
<h2>
<a _moz-rs-heading="" href="product.htm">Product title</a>
</h2>
<p></p>
<p>
<a href="product.htm">Product description</a>
</p>
</li>
This modification completely messes up how the elements are displayed according to the stylesheet. I rely on the a element to create a large link containing the product image, title, and description in a webshop product list.
I really need those large links but can't seem to find another way to achieve this. Any suggestions on what I should do?