inside the link/uncovering more bugs
I've talked about the difficulty of underlining in browsers before. Of course, there's more dirt below the surface. It's time to dig a little bit deeper into the a tag and uncover a css bug that is surprisingly hard to track down. I've been looking around for a while but found hardly anyone mentioning it, let alone proposing a solid fix. Sadly, I can't offer you a good one either, but at least bringing the bug to the surface might give it some needed attention.
the source
The source of our problem lies with the a tag, used in html to markup links. The link is often considered a base element (no extra nested elements within the link), which is probably the reason why not many people will hit this bug, and why it receives so little attention. But there might be situations where the content of a link could be divided into separate elements.
Imagine having a link to a pdf file. We want to include the file size of the pdf, and we want to include it inside the link. The most basic markup will look something like this:
<a href="#">pdf file <span>(2.5MB)</span></a>
the problem
Now, I've read plenty of discussions where people argue whether this kind of information needs to be included inside the link or not, but that's not the point here.
The thing we might want to do is position the info a bit further away from the text. There is one space we should put between the text and info by default (as it is inline content and should be read as such) but imagine we want more spacing. We could use the span and add some padding or margin to the left of the span. Easy enough. This will give us one of the following css rules:
1/ a span {padding-left:1em;}
2/ a span {margin-left:1em;}
The results can be seen on a little test page I made. All goes well in Safari and Firefox, but IE and Opera fail to underline the given padding or margin on the span. So much for the easy solution and back to the drawing board it is.
the scratching and cursing
a span {text-indent:1em;}
Sadly I've come up with very little to fix this bug. I tried to apply the text-indent property on the span but that does very little in this context. Apparently the text-indent only works within line boxes, so it's of little help here.
<a href="#">pdf file<span class="s"> </span><span>(2.5MB)</span></a>
a span.s {letter-spacing:1em;}
Another thing I tried was wrapping the space between the text and the info in an extra span and apply letter-spacing to that extra span. This works
in Opera but still fails to work in IE (unless you add two entities inside the span). But this is all very ugly, the extra space is
unneeded and the extra span element isn't very clean either.
a span {padding-left:1em; text-decoration:underline;}
My last attempt added an explicit underline to the span, together with a left padding (margins wouldn't work here as they fall outside the element). But as expected, this didn't amount to much either.
And finally the web didn't tell me anything useful either.
the solution
I'm afraid this is another reason why one might prefer the use of the bottom border instead of the standard underline for links and such. The bottom border won't break, although I still don't like that method of working.
Any tips and/or links to possible solutions are welcome. At least this is another good case of how hard it is to properly support even the most basic html elements on the web.
Comments
Mike
I understand your frustration with this bug, but does it really cause enough of a problem to be worth this much work?
Niels Matthijs
Well, most of the times it isn't serious enough to warrant any of the work-arounds. But it's a bug that irritates me so I won't let it go until I find a decent solution :)
And it never hurts giving a bug some extra attention, it might drastically lower google time for some, it might trigger something with others that might actually fix it. So I believe all the trouble is warranted indeed.
Jonas
Funny, I wasn`t even aware of that bug. But thanks anyway fo rthe clarification.
Rogier
Pretty strange bug indeed, but I think I found a solution that works here at Opera 9.5, Safari 3.1, IE6 and Firefox 2.
a { word-spacing: 1em; }
This does the trick for me here. First I tried to move the space into the span and apply the word-spacing to that, but then Safari shows an empty space where the word-spacing is. Great challenge for the monday morning btw, I'm fully awake now, thanks :)
Niels Matthijs
Smart solution, but it will only work in this specific example. If there are more "words" inside the span (like file types etc) the spacing will become really screwed). It might work if you could target the first word only. Or maybe apply a letterspacing on the first letter inside the span.
Another thing I tried was using the :before pseudo-element, but even with that Opera keeps messing up (and of course, IE doesn't even support that).
At least you got me thinking again, great contribution :)
Rogier
You maybe could do something with :before combined with content, but IE is still the great bugger here. There must be another way, but I don't have the time at the moment.
I'll try some things tomorrow, as my idea indeed only works with this case.
Richard Morton
Spacing within links can become confusing if the underline becomes broken up. It may appear as two links and even if most people will realise quickly that it isn't it makes them think (and in the words of Steve Krug, Don't!).
Richard Morton
And while I am on the subject, why on earth isn't the tag used to signify a link? Who said computers make life simpler?
Ronny
Nice catch. Just wanted to note that using border-bottom won't help if your link breaks into more than one line. The border will get beneath the lower line, instead of below each and every line.