TJKDesign: Home Page

ez-css Putting the 'less' in table-less layouts. css-101 logo
Bookmark this article at these sites:

How-to make the ABBR element work in IE lt 7

When authors use ACRONYM instead of ABBR or wrap every single ABBR inside a SPAN it is not necessarily because they do not know better, but more probably because Internet Explorer (lt 7) does not handle this element properly (obscure Internet Explorer bug).

In a 2006 article, Russ Weakley said:

Internet Explorer 5 and 6 for Windows do not support theĀ <abbr> element. This leaves developers with a range of choices:

This article is about a new option that:

  • preserves semantics
  • does not rely on a structural hack
  • validates.

Update: I just found out that this is not that new. Jon Gibbins wrote JavaScript, abbr and Internet Explorer two weeks ago and Jeremy Keith wrote ABBRacadabra almost two months before that.

The problem

Examples of acronyms and abbreviations:

Acronyms (acronym)
Abbreviations (abbr)

As the above examples show, hovering over the ABBRs in Internet Explorer (lt 7) does not reveal the expansion of the abbreviation in a tooltip. Also, the browser fails to change the cursor shape and does not create a bottom border for these elements; in fact, it ignores the following rule altogether:
abbr {
   cursor: help;
   border-bottom:thin dotted black;

The main problem is that IE breaks the ABBR. The button below shows how many nodes the browser finds in the parent of the "WWW" ABBR.

The fix

The simple statement below (for IE lt 7 only) is all we need for the magic to happen. This prevents IE from creating an extra node, helping it treat the ABBR element as it should.

<!--[if lt IE 7]>
<script type="text/javascript">document.createElement('abbr');</script>

Click on the button below to insert the above snippet into this document to see how Internet Explorer then treats the examples on this page.

Further reading

Please use this contact form to send feedback and report errors.