User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_4_11; en) AppleWebKit/525.18 (KHTML, like Gecko) Version/3.1.1 Safari/525.18 Build Identifier: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.4; en-US; rv:1.9) Gecko/2008051202 Firefox/3.0 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 is present in Firefox 22.214.171.124 and 3.0RC1 (Mac). 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). Reproducible: Always Steps to Reproduce: 1.Set up a <div></div> and surround it by <a> and </a>. 2.Include a paragraph inside the <div>. 3.Don't terminate the paragraph (i.e. no </p>) before the div ends. Actual Results: If the 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. Expected Results: The expected behavior, which both Safari (Mac) and IE6 & IE7 (PC) 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>. The given link is a self-contained demonstration of this bug -- http://recoveringphysicist.com/ffox-a-div.html
Using DOM Inspector, you can see that in the first example, one A element surrounds the DIV, while in the second example, it gets the residual-style handling of being duplicated. Pretty weird that the this behavior depends on the existence of a "</p>", but I've seen equally weird things with Gecko's residual-style handling elsewhere. This is most likely to be fixed by switching to the HTML 5 parsing algorithm (bug 373864). I don't think there are plans to tweak Gecko's existing algorithm.
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. (3.7a5pre, Mac, 05-May-2010 04:16.)
Regarding comment 2, that's more a layout issue, bug 647553, comment 3 explains the CSS spec about this. See also bug 1777 and especially bug =1777 comment 242 and further. The page of the url is in standards mode. When in quirks mode, it works all right.