Firefox, HTML5 and an anchor bug

by Stephanie Rewis on July 21, 2010

I’m sure someone’s named this bug already. And perhaps it’s written up all over the web. But it just affected a site I was working on today and left me scratching my head for a few minutes. In case you run into it, I’d like to confirm to you, “No, you’re not crazy.” (Well, not for this reason anyway.)

Apparently, Firefox has an issue with the ability HTML5 has given us to wrap just about anything in an anchor (one of my favorite features). I find this useful in many situations. Wrapping an anchor around an image and a paragraph/caption (whether I’m using the figure element or not), wrapping the entire contents of a list item, wrapping all headings in an hgroup when used as a logo of sorts, etc. Much of the time, I’m using the declaration “text-decoration: none;” and then using another method to indicate the link. Today though, that changed. I needed this link underlined.

Firefox refuses to show an underline on a link around block level elements

I had a client report today, with an HTML5 site I’m building, that one of the pre-order links wasn’t underlined in Firefox. The anchor, in this case, was wrapped around a paragraph and image. I used Firebug to inspect it. The CSS for the link itself wouldn’t even show up in Firebug (the a:visited state did). I validated the page. All was well. I Inspected with Dreamweaver and the link was underlined as it should be. It was also underlined in webkit browsers and Internet Explorer. WTF?

It finally occurred to me that this link was around block level elements. I created a simple test case and, sure enough, with a heading and paragraph wrapped in an anchor, Firefox refused to show the underline. The answer was found in setting the anchor to display: block. But really Firefox? You’re usually nearly bug-free. Can we get this fixed?

{ 2 comments… read them below or add one }

Rune M. Andersen November 16, 2010 at 2:11 pm

I just learned that the anchor-wrapped elements need to have text-decoration declared as well as the anchor itself. I guess you could set it explicitly, but “text-decoration: inherit” does the trick as well :)


Oli Studholme November 21, 2010 at 7:06 pm

It’s fixed in trunk (via the fancy-pants new HTML5-based parser), but it won’t see public release until Firefox 4 afaik.

Leave a Comment