Elegant Abbreviations (25th March 2005)

On the advice of Icey (creator of the IceyBoard software used by G! Forums) I added abbreviations to all my pages. The actual tag used is <abbr> and it surrounds the letters being used to represent a word, phrase, organisation or whatever. The TITLE attribute contains the full name so that when people hover their mouse over it, they get a tooltip showing the full version. Great stuff…except that the entire IE series seem to ignore the <abbr> tag. This means that I have added a significant amount of filesize and spent dozens of hours adding these tags in TextStudio when loads of people are not able to benefit from them!

After having a nervous breakdown, I happened to look at the abbreviation used in one of the CSS links at the bottom of the page. It struck me that the abbreviation tag and the anchor (link) tag were both using the title attribute. The title attribute is well supported by the IE series; I know for sure it works back in IE4. There is nothing unique about the abbreviations tag, so why not replace it with a tag which is supported by all browsers and which I do not use anywhere? The <em> tag, for example?

Well, this is what I have done. Since the tag won’t accept borders in IE5 (and probably other versions) I have decided to simply use the italicised styling browsers normally give the <em> tag but also set the cursor to the “help” variant. It seems to work pretty well but I wholeheartedly welcome any feedback on this. My contact details offer several ways to communicate with me, so if you have a reason why this is good or bad, let me know!