More about link ‘footprints’
A bit about link ‘footprints’, ‘block-level’ links, and HTML 5.
Recently, I wrote about link visualisation, in which I explored some of the weird and wonderful ways the ‘footprint’ of a link can be displayed. By which I’m referring to the clickable area created by a link’s element, which turns out to be quite unpredictable, especially when used in conjunction with images. Since then, I seem to mainly have been obsessing over some of the finer points of Andy Clarke’s site design, and exploring his techniques over at For a Beautiful Web.
The two just collided, when I started examining his cover image styles, and observed a mild annoyance:
Linked title …
… a weird unclickable void …
… and a clickable image.
It’s these kinds of tiny detail that a) intrigue me, and b) infuriate me. Just like when inline links that span multiple lines, often with a larger line-height, generate an annoying ‘no-man’s-land’ in-between the linked text, on which clicks amount to nothing.
The above example might seem perfectly natural, after all, that’s how a linked image followed by a linked heading usually display, right? But Andy’s making use of an excellent feature of HTML5 in which a link can contain all manner of elements, be they inline or block-level.
But why aren’t they linking, I hear almost no-one cry. First, here’s the full example that I’ve been fire-bugging to death (please feel free to knock yourself out):
Designing with Microformats
Microformats add meaning to widely-published types of information including contacts, events reviews and syndicated content.
Digging a little deeper, you might notice that the element containing the link has a big top padding set, in order to contain its image, which is positioned absolutely. I’m already going into far more detail than is healthy here, but it’s that padding that is responsible for the broken link ‘footprint’, but that’s also providing the job of moving the heading down (the heading itself has no top margin or padding).
So it seems that, in this particularly unusual setup, link footprints behave slightly more weirdly, yet again. A fix, you ask? It’s not particularly pretty, but here’s my solution:
#example-2 div.promo-main-microformats
{ padding-top: 300px; }
#example-2 h3
{ position: relative; top: 1em; margin-bottom: 2em; }
The first declaration simply reduces the padding to the exact height of the image, causing the heading to but up against it once more:
Padding which shrinks the image to fit.
And, secondly, I now shift the image down by positioning it relatively, and applying a bottom margin so that the next paragraph is still spaced out correctly. The finished thing looks like:
Designing with Microformats
Microformats add meaning to widely-published types of information including contacts, events reviews and syndicated content.
and the link behaves nicely, now, if you care to try it out.
Now, I’m sure there was a point to all of this …
Comments
Andy Clarke said:
What can I say? How impressed am I? Pretty damn impressed.
Not only have you taught me something, you've solved a problem I didn’t know I had.
You’re hired!
Sat 28 Nov 2009 06:59
zeldman said:
Wow. Well done! And congratulations. I believe you have just initiated the next generation of design problem solving for those who design with web standards.