Firefox bugs involving linked <div>s

[2010-05-06] Most of the incorrect behavior was fixed by the new HTML 5 parser; daily build tested on a Mac: 3.7a5pre, 05-May-2010 04:16. But it's not 100% resolved: the linked objects inside the linked div display neither the expected underline when inactive nor the expected overline on mouseover. They do display the expected color change on mouseover. Noted in bug 436600.

Firefox has a constellation of bugs where it behaves differently depending on whether or not a <p> is explicitly terminated, inside a <div> which is enclosed in a link. The <p> need not be the final object in the <div>. The bug was found in Firefox 2.0.0.14 (tested on a Mac); it was still there in Firefox 3.0.1; and it persists in 3.6.3 and 3.7a5pre. The behavior is as ex­pected in Safari on Mac and IE6, IE7, and IE8 on Windows.

To reproduce, do View Source: this file is a self-contained demonstration. Or set up a <div></div> and surround it by <a> and </a>. Include a paragraph inside the <div>. If that paragraph is terminated with </p> before the <div> ends, then the entire area of the <div> will be linked as expected. If no </p> appears, only objects inside the <div> are linked (such as text) — the a:hover state is active and if you click, you follow the link. The “white space” of the <div> outside of its contained objects is not linked and the a:hover state is not invoked (for contained text objects) when the mouse hovers over this white space.

A related (?) manifestation of the bug has a countervailing effect. In the first case, where the enclosed <p> is terminated, any contained text does not exhibit all the elements of the text-decoration style that should apply to text within an <a> — in the examples below, the text should be underlined (it’s not), should turn red (it does), and in the hover state should exhibit an overline (it doesn’t).

The expected behavior, which both Safari and IE exhibit, is for all contained text objects to react to a:hover by both a color change and a text-decoration change, once the mouse enters the white space of the <div>.

<a><div>...</div></a> — enclosed <p> terminated by </p>:

Another object.

<a><div>...</div></a> — enclosed <p> not terminated:

Another object.

Keith Dawson
2008-05-30