Firefox Self-Correcting Markup & You

After a painful struggle with an odd visual bug, I can fully declare victory and share my learning with The Internets.

To the Point
I was going to give a succinct problem and solution here, but I honestly have no idea what the reason is behind what I'm seeing. What am I seeing? Firefox rendering my markup differently once the Gecko rendering engine gets a hold of it, specifically puking when a DIV was in an A and a P inside a STRONG. With that said, there's a lot more markup and CSS involved than simply those 2 nested tag examples. This may only be helpful for you if you noticed Firefox is rendering your markup differently than it's written (thank you, Firebug!).

Background

Above is what the visual bug looked like. What was particularly annoying about this bug was its random frequency. When you reloaded the page, sometimes all of the member images would sit in the left corner like they were supposed to.

I traced the problem down to the following rendering difference (using HTML 4.01 Strict Doctype):

Correct HTML

<span class="clear">
  <a href="score.php?id=X&photo=X">
    <img class="winner" src="img/global/scored.gif"/>
    <img class="photo" src="img/submissions/0/m/xxxxx.jpg"/>
    <img class="spaceball" src="img/submissions/0/m/xxxxx.jpg"/>
    <div class="member">
      <img class="avatar" src="img/users/0/s/xxxxx.jpg"/>
    </div>
  </a>
</span>

Rendered HTML:

<span class="clear">
  <a href="score.php?id=X&photo=X">
    <img class="winner" src="img/global/scored.gif"/>
    <img class="photo" src="img/submissions/0/m/xxxxx.jpg"/>
    <img class="spaceball" src="img/submissions/0/m/xxxxx.jpg"/>
  </a>
  <div class="member">
    <a href="score.php?id=X&photo=X">
      <img class="avatar" src="img/users/0/s/xxxxx.jpg"/>
    </a>
  </div>
  <a href="score.php?id=X&photo=X"> </a>
</span>

The Fail Train is highlighted in red. Firefox hits the DIV tag inside of the A tag and decides that the A tag needs to be closed. I don't know why. There's no validation rule that says a DIV cannot go inside an A tag. From that point on, it's doing all kinds of wacky stuff - inserting the A tag inside the DIV and an empty A tag following it?

I've isolated just this bit of HTML to a page and tried to reproduce the visual bug, but it seemed to work every time. When the rest of the HTML was re-introduced, the bug reappeared. No CSS was being applied to the markup.

Help me Obi-Wan
As engineers often do, I took an educated guess at a fix without fully understanding why I was getting the incorrect rendered markup. Since it was the DIV it was hitting that caused the A tag to prematurely close, what if it weren't a block-level element? After all, that was a difference between the IMG tags it was still encapsulating and the DIV it was not. So I swapped the DIV out for an EM. It worked. It worked every time I reloaded the page.

A related problem was a P tag sitting inside of a STRONG tag. Again, I don't believe there's any validation rule which states this is invalid, but sure enough Firefox would sporadically end the STRONG tag when it hit a P inside of it.

Correct HTML:

<div class="number clear">
  <a href="score.php?id=X&photo=X">0 comments</a>
  <strong class="no">
    <p class="z">Score:</p>
    <p>hidden</p>
  </strong>
  <p>5 scored</p>
</div>

Rendered HTML:

<div class="number clear">
  <a href="score.php?id=X&photo=X">0 comments</a>
  <strong class="no"> </strong>
  <p class="z">
    <strong class="no">Score:</strong>
  </p>
  <strong class="no"> </strong>
  <p>
    <strong class="no">hidden</strong>
  </p>
  <strong class="no"> </strong>
  <p>5 scored</p>
</div>

Like the DIV in the A problem, I simply made the P tag an inline-level tag and Firefox was happy. This seems like a Gecko rendering bug, but I'm not certain. Hope this helps some people out.

If you find out the reason for this, please let me know in the comments. Thanks!

posted by Ryan Gillespie