Why is FF3 rendering an <h3> inside an <a> incorrectly?

Question

Hello, first post (question) here…

Take a look at this page in FireFox. Feel free to navigate to any of the top six product categories to see more of the same type of code.

If you are [un]lucky enough to see the glitch, you will see at least one product box expand it's height to epic proportions.

Here's what the actual code is:

<div class="product_category">
  <a href="../products/dht_1500.php" style="height: 340px;">
    <h3>DHT 1500</h3>
    (superfluous HTML omitted here)
  </a>
</div>

Here's what Firebug reveals:

<div class="product_category">
  <a style="height: 340px;" href="../products/dht_1500.php"> </a>
    <h3><a _moz-rs-heading="" style="height: 340px;" href="../products/dht_1500.php">DHT 1500</a></h3>
    (superfluous HTML omitted here)
  <a style="height: 340px;" href="../products/dht_1500.php"> </a>
</div>

You can see FireFox is definitely closing my tags and re-opening them again, and pulling the custom CSS height style along with it, which is resulting in each product box height skyrocketing. Also note that strange _moz-rs-heading="" bit.

I suspect my problem has to do with my using block HTML elements within an inline tag, but I thought I solved that problem by converting the tags to block formatting in my stylesheet:

.product_category a {
    display: block;
}

What's frustrating about this issue is that FireFox is clearly playing favorites to my tags. It usually renders the page exactly like I want it, but then every once-in-a-while, it will blow one of my product boxes sky-high, and seemingly at random.

The pages work properly in Internet Explorer and Safari. I've been testing it with FireFox 3.6 on Mac, but have seen the same problem on FireFox for PC.

Thanks for any tips…

Answer 1

Having block level elements (h3) inside an inline element (a) is not valid HTML.

Change your block elements to a span and use CSS to style it how you wish.

Answer 2

A similar question with the exact same symptoms was asked a few days back. The solution there was in fact taking the native block elements out of the natively inline ones. Seems changing display doesn't help in this case.