«
»

Styling abbr with CSS

Proper use of the abbr and acronym elements is good for accessibility and good for conversational style writing. No longer do you have to write phrases that grate on the ear such as, “Many problems are much easier to solve with a native Extensible Markup Language (XML) database and XQuery than with a relational database and Structured Query Language (SQL).” Instead, you just assume 99% of your audience knows what you’re talking about, and instead you write:

Many problems are much easier to solve with a native <abbr title="Extensible Markup Language">XML</abbr> database and XQuery than with a relational database and <abbr title="Structured Query Language">SQL</abbr>.

However, there are two problems with this:

  1. Many browsers including Safari and Internet Explorer essentially ignore the abbr and acronym elements. They do not show the user the title text.
  2. Firefox does show the title text in a tooltip but it also adds an annoying dotted underline to each such element.

Has anyone figured out how to write a CSS rule that fixes either or both of these issues? I’d like the title to be shown in a tooltip if–and only if–the user mouses over the abbreviation. Otherwise I’d like the user not to be alerted to it. Has anyone made this work?

«
»

This entry was posted on Wednesday, March 28th, 2007 at 11:51 AM and is filed under Web Development. You can follow any responses to this entry through the Atom feed. You can make a comment, Digg this story, or trackback from your own site.

7 Responses to “Styling abbr with CSS”

  1. John Cowan Says:
    March 28th, 2007 at 1:27 PM

    I like the dotted lines, myself.

  2. Rob Koberg Says:
    March 28th, 2007 at 4:49 PM

    Are you especially inquisitive lately (and a bit lazy), or is this some kind Tom Sawyer experiment?

    :) Rob

  3. Kirk Says:
    March 29th, 2007 at 11:17 AM

    I get a solid line on Firefox 2.0.0.3 on the Win2003 platform.

    Internet explorer 7 – does show the title text.

  4. Christof Höke Says:
    March 30th, 2007 at 10:01 AM

    Using the acronym element with a title attribute works in Firefox and all IEs I have testet (7, 6, 5.5) (don’t know about Safari though). Style it as you like, I normally use acronym {global.css (line 49)
    border-bottom:1px dotted #666666; } to have it the same for all browsers but you can also simple disable the border in Firefox with border-bottom: none. Showing that there *is* an explanation at all is good style IMHO…

  5. pauldwaite Says:
    March 30th, 2007 at 6:53 PM

    > “you can also simple disable the border in Firefox with border-bottom: none”

    Yup. That works in all browsers, for <abbr> and <acronym>. But, as Christof said, your users might appreciate knowing that acronyms and abbreviations have expansions, just like making links blues lets them know they’re links.

    IE 6 and earlier act as if <abbr> tags aren’t there (they still show their content though). My version of Safari (2.0.4) doesn’t do the dotted border by default on <abbr>, but it shows the tooltip just fine.

  6. pauldwaite Says:
    March 30th, 2007 at 6:54 PM

    Whoops: I didn’t notice the “simple HTML allowed” note. Soz.

  7. Joe Gakenheimer Says:
    March 6th, 2008 at 3:35 PM

    Yes, “border-bottom: none;” does the trick; thanks for the solution.

Leave a Reply