Posts Tagged ‘Firefox’

Styling <abbr> tags and displaying tooltips

Thursday, September 9th, 2010

I have been working on a site which includes some abbreviations so I thought the obvious thing to do was to use the HTML abbr tag to explain them.

Nice browsers like Opera and Firefox display abbreviations with a blue dashed line underneath, when you hover over the text a tooltip pops up to display the title text of the abbreviation. So you can do something like this to expand an abbreviation

<abbr title="Hyper Text Markup Language">HTML</abbr>

Chrome & Safari offer the tooltip feature but don’t show the dashed underlining unless you provide a style for the abbr tag. Internet Explorer is different again, IE7 & IE8 will display the tooltips (but not very reliably) but ignore the styling, IE6 doesn’t do anything.

To get working properly in all browsers I thought I would try adding a class to each tag to see if Internet Explorer liked that. I had already styled the abbr element to keep Chrome & Safari happy so I just added a selector for a new abbr class to the existing style.

abbr, .abbr {
border-bottom-style: dashed;
border-bottom-width: 1px;
border-bottom-color: blue;

It worked better than I could have hoped, I didn’t need to add class=”abbr” to any of my html abbr tags at all. It seems that just declaring a style for a class of .abbr makes Internet Explorer work like the other browsers. And as a real bonus it also works in IE6 and IE8 behaves more consistently too!

I don’t know why this works and perhaps I am not the first to discover this but I thought it was worth sharing.