cross-browser underlining
Right 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.