cross-browser underlining/the difficulty of drawing a line
published on:December 28, 2007 / 17:55
back to overviewRight before the year ends, I'll leave you with a little present. If you've ever had to explain why it takes so much bloody time to fix a site in all browsers, be sure to read on.
Browser inconsistencies. We as web developers we are confronted with them every single day. They have become an integral part of our job and often dictate the way we tackle certain problems. Most importantly, they take up a lot of our precious time, even with tools like Firebug to our disposal. For people not working with html and css on a daily basis it can be quite hard to grasp just how widespread these inconsistencies are.
Recently I ran into a very interesting example, one you don't see described too often. It's not a big issue, it's not even an actual bug and you have to pay close attention to actually notice the effect. But it's there, and it's a telling example of how deeply rooted these browser inconsistencies really are. And most of all, it's a very clear and easy to explain case for people not familiar with the ins and outs of css.
Looking at links
Links are the cornerstones of the internet. The <a> tag must be one of the most
powerful in the html specs. We all know links are underlined. All browsers apply standard styling to links so they
are underlined. So far so good.
Underlining is an easy thing to do. You just draw a line beneath the text. But where exactly is "beneath"? I did a quick test which resulted in pretty much the same effect cross-browser. They all agreed on positioning the line within the line-height space dictated by the inline element, to make sure no extra vertical space was needed. The only small inconsistency appeared in Firefox, which put the line 1px lower than other browsers. Not too bad.
Test page revisited
When documenting the difference in Firefox something struck me and I returned to my test page. All other browsers put the line 1px above the absbottom of the text. But was it really 1px or was it a relative measure depending on the font size? Upon increasing the font size of the text considerably (if you test, test extremes) the results where pretty interesting.
Each family of browsers reacted differently. Firefox still put it at the absbottom of the text, the positioning in Opera remained 1px above the absbottom. But Safari put it 1px below the baseline of the text and IE (6&7) put the line somewhere between the baseline and the absbottom of the text. Above that, not all browsers enlarged the size of the underlining. That's four different behaviors for four different browser families. Score!
So?
Like I said, the effect is small and you won't actually notice it unless you really look close at the differences between browsers, or you size your fonts considerably, but the difference is unmistakably there. A simple issue as underlining text, a basic styling every browser needs, is handled differently by four different browsers.
Only Firefox' implementation could be considered harmful, as the line could touch the border of an underlaying element, if not carefully styled. This of course hurts the visibility of the link.
The things we have to put up with each day.
Article info
contact me
If you want to send me a quick message or you have any questions, don't hold back.
the archive
All my articles are neatly filed inside the archive. Search and filter your way to the articles you want:
5 comments in total
Great article. It's nice to see that Opera is actually the only browser that acts in a way one expects a browser to act. Of course, FF's implementation is dangerous (as you explained), but what worries me more is that the Webkit and IE engines don't change the size of the line. This is one big no-no from an accessibility point of view. Perhaps a bug-report to the Webkit developers could result in a quick fix on Konqueror and (hopefully), a change in Safari (but that's probably one for the long run).
Very nice find and perfectly illustrated. Shows how big pain can browser inconsistencies, no matter how small, can prove to be(no I will not say please set standard people as that would be just wasting breath). On a side note just discovered your blog almost by accident and must say I like what I see for now at least so keep up the good work.
Is this a reason for using border-bottom on links and hiding the underline?
I don't think using border-bottom is a good alternative:
Furthermore, when the a tag is given display:block; padding could be problematic and the line will be quite far away from the text.
I just love ths articel and your example has finally given me something really simple that I can take to customers as an explanation - Thank you - do keep up the good work
* required fields