I recently noted that some elements on my page randomly weren’t rendered like I expected even though other elements of the same CSS class were rendered correctly. Looking at the code I noticed that Firefox was adding weird tags to link tags:
<h1>
<a _moz-rs-heading="" href="/lists/1?locale=en">Gute Weine</a>
</h1>But not only that. The whole HTML structure was messed up.
The green area highlights a correctly rendered element like it was coded in the plain file. The red area highlights what happened randomly in Firefox.
After a bit of googling it turned out that this false rendering was caused by a mistake from my side: You should not wrap block elements like div and h1 with a link tag. So the HTML really should look more like this:
<li class="list" id="list_19">
<div class="list_content">
<h1><a href="/lists/19?locale=en">Einkaufsliste</a></h1>
<div class="summary">
<a href="/lists/19?locale=en">
4 items in total, 3 items done.
<br>
Last updated 3 days ago
</a>
</div>
</div>
</li>In this code a-tags wrap only text elements. img-tag would be fine, too. Other elements you should avoid in order to prevent rendering you don’t expect.
It looks like amongst a lot of other cool stuff HTML5 will bring us also block-level links.
I'm a Software Developer, currently working at
Any update in this issue?
It’s not an issue – it’s about writing correct html.
True. As I stated above this was me writing bad HTML.
https://bugzilla.mozilla.org/show_bug.cgi?id=533149
It’s valid HTML5. There was a problem with Firefox’s parser, but they fixed that.
The new parser will be available in stable builds soonish.
This issue is still there. I was working with Firebug and was surprised to see new link tag coming.
Thanks for the heads-up, I was actually driven completely crazy on my way home last night figuring out WTF!? – I know how to sort it now so thanks :-)
This article saved me from a long, miserable evening. My sincerest thanks!
*However*, I am using HTML5, and the anchor causing FF’s hissy fit was around a … Shouldn’t this be valid? Very suspicious.
Plus everything else can handle it. Even IE. Don’t see why Firefox had to get so upset and throw my entire layout apart.
Well I can confirm that still in March 2011 it is happening and this article saved the day. In my case I hadn’t closed a strong tag, which casued firefox to add some silly code to my pages. Whatever is causing your error, put the page through the html validator to save you some time.
Thanks for this! Was also very confused.
In my case, we had a self-closing anchor tag (invalid markup):
Which was causing the issue.