Question

I’ve earlier heard that Firefox has a major problem with links wrapping around block elements, and it did recently give me some problems.

It is sometimes (maybe with a 20% rate), for some reason, changing this code (note that all the 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>

Into 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>

Which forces the stylesheet to display the elements in a totally wrong way; I use the a element to get a big link containing the product image, title and description in a webshop product list.

I want those big links and can’t find an alternative way to do this. What would you suggest?

Answer 1

I don’t know how authoritative a resource xhtml.com is, but they do say that the a tag can only contain:

• Inline elements, except a, at any depth
• Text

A possible solution would be to just reorganize your HTML so that it makes more sense (eg, not trying to put block-level elements in inline-level elements). Just have a single link for the product (maybe in the h2, or around the image). Then use JavaScript to detect a click anywhere on the li, and load the link.

Does that make any sense? Here’s an example.