You are invited to Log in or Register a free Frihost Account!

Styling <abbr> in IE

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.

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>
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(){

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.

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.

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

Your comments and suggestions are welcome at
thanks for that>>> Very Happy
Related topics
<hr> stilosi con i CSS
Formatting Text - Abbreviations and acronyms
Adding <br /> to text area
Is it possible to change the bgcolor of <iframe> in IE
Force Javascript to write into <body> ??
Force javascript to write codes into <body> ?
Congrats Tony - the power of <title> and <meta desc
How to make a Html post in Phpnuke
converting <TABLE> to CSV
Aligning coloums with <div> and CSS
<iframe> Trouble Saver
problem with <ul> navigation
<li> tag document type?
Reply to topic    Frihost Forum Index -> Webmaster and Internet -> Design Tips

© 2005-2011 Frihost, forums powered by phpBB.