Styling abbr in IE

Marek Prokop Mar 18, 2005

General

Internet Explorer for Windows does not support the <abbr> element that should be used for proper markup of abbreviations. The solution is based on one simple fact: even though IE ignores the element itself, other elements nested in the <abbr> work fine. This script wraps the content of the <abbr> with <span>, set its title and class attribute and the <abbr> tag behaves like it should.

Notes

Created by: Marek Prokop
Web Site: http://www.sovavsiti.cz/css/
Posted: March 18, 2005

Source Code

Paste this source code into the designated areas.

External file

Paste this code into an external JavaScript file named: stylingAbbrinIE.js

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;
  }
}

// Created by: Simon Willison
// http://simon.incutio.com/archive/2004/05/26/addLoadEvent
function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}

addLoadEvent(function() {
  styleAbbr();
});

isIE = (document.all) ? true:false;

CSS

Paste this code into your external CSS file or in the <style> section within the HEAD section of your HTML document.

abbr, acronym, span.abbr {
  cursor: help;
  border-bottom: 1px dashed #000;
}

Head

Paste this code into the HEAD section of your HTML document.


<script type="text/javascript" src="stylingAbbrinIE.js"></script>

Leave a Response

(0 comments)

Alphabetical Listing

Tutorials

Ajax Tutorials

Ajax

Buttons

Cookies

CSS

Forms

Games

Generators

Image Effects

Math Related

Miscellaneous

Multimedia

Navigation

Page Details

Password

Snippets

Text Effects

Time & Date

User Details