Styling <abbr> in IE
You can also read this article in Italian and Belorussian.
Introduction
Internet Explorer for Windows does not support the <abbr> element that should be used on web pages for proper markup of abbreviations. While you can apply cascading style sheets (CSS) on the <acronym> in IE, you can't do the same for <abbr>. Moreover, IE displays the title attribute of the <acronym> element as a tool tip, but ignore the <abbr>.
This IE's bug (or feature) makes some webmasters believe that the <abbr> element is useless at all, however that's not true. For instance both Mozilla and Opera handle it properly and it's quite important for web content accessibility as well. That's why I was looking for a solution and finally have found one.
Solution
The solution is based on the simple fact: even though IE ignores the <abbr> element, other elements nested in the <abbr> work fine. So I wrapped the content of the <abbr> with <span>, set its title and class attribute and voila–the <abbr> begins to behave like <acronym>.
Sample Code
Take a look at the following code, showing an example of a simple abbreviation:
<abbr title="Cascading Style Sheets">CSS</abbr>
And now, compare it with the code after the change:
<abbr title="Cascading Style Sheets"><span class="abbr" title="Cascading Style Sheets">CSS</span></abbr>
Automation
Manually inserting the <span> elements into every <abbr> is not reasonable. It would be quite tiresome and moreover it isn't necessary for browsers like Mozilla or Opera. Fortunately, there is an automated solution based on the client-side scripting.
As you may notice, the abbreviations on this page have tool tips even in IE and are styled with a dashed underline and a question mark cursor. However, if you take a look at the source code, you'll find no <span> elements described above. This is due to a simple JavaScript attached to the page:
function styleAbbr() {
var oldBodyText, newBodyText, reg
if (isIE) {
oldBodyText = document.body.innerHTML;
reg = /<ABBR([^>]*)>([^<]*)<\/ABBR>/g;
newBodyText = oldBodyText.replace(reg, '<ABBR $1><SPAN class=\"abbr\" $1>$2</SPAN></ABBR>');
document.body.innerHTML = newBodyText;
}
}
window.onload = function(){
styleAbbr()
};
isIE = (document.all) ? true:false;
The script checks if the browser is IE and then replaces all occurrences of the <abbr> element with the modified version (with <span> inserted). Notice, that we have to use regular expressions and the proprietary innerHTML instead of standard DOM methods, because IE can't access the <abbr> element via DOM.
Styling
Finally, let's take a look at the style sheet used on this page. It's fairly simple:
abbr, acronym, span.abbr {
cursor: help;
border-bottom: 1px dashed #000;
}
Mozilla and Opera take use of the abbr and acronym selectors, while IE uses the acronym and the span.abbr selectors. In any case, both <abbr> and <acronym> elements are styled with the question mark cursor (on mouse hover) and the dashed underline.
Notes
Thanks to Michael Kusyn for his help with the JavaScript solution.
To learn more about
<abbr>,<acronym>and the difference between the two, read Craig Saila's excellent article HTML is not an acronym... at Evolt.org.
Your comments and suggestions are welcome at marek@sovavsiti.cz.