inside the link

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:

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:

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

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.

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.

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.